Can I apply CSS to a <div>'s background-image?
Question
So I'm just having some fun with HTML and CSS, and I was trying to overlay some text over an image.
The way I was taught was to give the image a div all for itself, and set it as the background image. Then you could type right over it.
However, I want the background-image of the div to comply to some CSS I already wrote, telling the image to scale to the page's width.
Is there a way of applying CSS to the 's background image? Or should I choose another route?
Thanks in advance,
Rain
Code:
body { background-color: #d0d0d5; } #pageWrapper { margin-left: -10px; margin-top: -15px; margin-right: -200px; background-color: #9b9a9d; height: 1500px; width: 100%; } #header { font-family: Lato; font-weight: bold; background-color: #ffffff; height: 70px; width: 100%; border-bottom: 2px solid #E8E8F0; } .links { list-style-type: none; font-size: 14px; color: #000; } .linkLeft { float: left; display: inline-block; line-height: 55px; text-decoration: none; padding-right: 20px; color: #000; text-transform: uppercase; } .linkRight { float: right; display: inline-block; line-height: 55px; text-decoration: none; padding-left: 20px; color: #000; text-transform: uppercase; } #link5 { padding-right: 40px; } #imageWrapper { max-width: 100%; height: auto; width: auto\\9; /* ie8 */ } #jumbotron { max-width: 100%; height: auto; width: auto\\9; /* ie8 */ background-image: url(img/Canadian-Rockies-Mountains.jpg); }
<!DOCTYPE html> <html lang=en> <head> <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href="main.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div id="pageWrapper"> <div id="header"> <ul class="links"><li><a href="#" class="linkLeft">Home</a></li> <li><a href="#" class="linkLeft">Browse</a></li> <li><a href="#" class="linkRight" id="link5">Help</a></li> <li><a href="#" class="linkRight">Log In</a></li> <li><a href="#" class="linkRight">Sign Up</a></li></ul> </div> <!--header END--> <div id="imageWrapper"> <!--<div id="imageText"> <h1>Discover the Canadian Rockies.</h1> <p>Book a trip to Canada today, guy.</p> </div>--> <div id="jumbotron"></div> <!--Original code used to place image before I wanted text overlay follows--> <!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />--> </div> </div> <!--pageWrapper END--> </body> </html>
5 answers
solution1
0 2015-01-06 19:54:33
Look here:
http://www.w3schools.com/css/css3_backgrounds.asp http://www.w3schools.com/css/css_background.asp
These properties (like background-size ) will be in relation to the div who has the background-image set. To make the div itself fill its parent, set width: 100% in the div's class
solution2
0 2015-01-06 19:57:31
simple example to apply css for image inside div
CSS
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
JsFiddle
solution3
0 2015-01-06 19:57:32
you can try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url("http://www.w3schools.com/cssref/paper.gif");
width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>
solution4
0 2015-01-06 20:40:55
If I'm reading your question properly, background-size: cover will force the image to expand the way you want. I've modified your code, is this the effect you're looking for?
body { background-color: #d0d0d5; } #pageWrapper { margin-left: -10px; margin-top: -15px; margin-right: -200px; background-color: #9b9a9d; height: 1500px; width: 100%; } #header { font-family: Lato; font-weight: bold; background-color: #ffffff; height: 70px; width: 100%; border-bottom: 2px solid #E8E8F0; } .links { list-style-type: none; font-size: 14px; color: #000; } .linkLeft { float: left; display: inline-block; line-height: 55px; text-decoration: none; padding-right: 20px; color: #000; text-transform: uppercase; } .linkRight { float: right; display: inline-block; line-height: 55px; text-decoration: none; padding-left: 20px; color: #000; text-transform: uppercase; } #link5 { padding-right: 40px; } #imageWrapper { max-width: 100%; height: auto; width: auto\\9; /* ie8 */ background-image: url(http://placekitten.com/g/200/300); background-size: cover; height: 200px; }
<!DOCTYPE html> <html lang=en> <head> <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href="main.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div id="pageWrapper"> <div id="header"> <ul class="links"><li><a href="#" class="linkLeft">Home</a></li> <li><a href="#" class="linkLeft">Browse</a></li> <li><a href="#" class="linkRight" id="link5">Help</a></li> <li><a href="#" class="linkRight">Log In</a></li> <li><a href="#" class="linkRight">Sign Up</a></li></ul> </div> <!--header END--> <div id="imageWrapper"> <div id="imageText"> <h1>Discover the Canadian Rockies.</h1> <p>Book a trip to Canada today, guy.</p> </div> </div> </div> <!--pageWrapper END--> </body> </html>
solution5
0 2015-01-06 20:47:44
This is how you cover a complete screen and make it adapt to screen size.
html, body {
position:relative;
height: 100%;
background:url('yoururl')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.