Jump to content
Sign in to follow this  
adam2350

Zdjęcie jako tło i na tym tekst.

Recommended Posts

Siemka !

 

Mam takie pytanie odnośnie efektów na stronie. Jak mogę takie uzyskać jak na tej chodzi mi o przezroczystość i pod tym wstawione zdjęcie (http://www.djmikesz.com/). Jak jest mechanika tego ? Czy moglibyście mnie jakoś nakierować ? Z góry dziękuję ☺️

Share this post


Link to post

Strona oparta jest na WordPress i używa https://artisanthemes.io/previews/?theme=modules

 

Nie wiem o jaki efekt dokładnie ci chodzi ale sprawdź:

 

HTML

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'>
  </head>
  <body>
  
<div class="header">
<div class="navcontainer">
   <ul class="nav">
	 	 <li>Home</li>
		 <li>About</li>
		 <li>Contact</li>
	 </ul>
</div>
</div>


<div class="billboard">
  <div class="text-wrapper">
    <h1>SAMPLE TEXT</h1>
   </div>
</div>


  </body>
</html>

 

CSS

body{
margin:0;
padding:0;  
}

.header{
height:50px;
background-color:#191919;
}

.navcontainer{
float:right;
margin-right:100px;

}
 

.nav li{
display:inline;
font-family:arial;
color:white;
font-family: 'Titillium Web', sans-serif;
font-size:14px;
font-weight:300;
padding-left:50px;
}


.billboard{
height:620px;
width:100%;
background-repeat:no-repeat;
background-size:100%;
text-align:center;
background-position:center;
background-image:url('http://i300.photobucket.com/albums/nn18/ojijimanuel/Midtown_Manhattan_and_Times_Square_district_2015_zpsqimz80ub.jpg');
position:relative;

 }
 
 .text-wrapper{
   position:absolute;
   top: 50%;
   left: 50%;
   width: 400px;
   height: 200px;
   margin-left: -200px;
   margin-top: -29px;
   }
 
 h1{
   margin:0;
 text-align:center;
 color:white;
 font-family:arial;
 font-size:50px;
 }

 

  • Like 1

Share this post


Link to post

nazywa się to Full Screen Landing Page

 

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...