CSS background-image not showing on element
Question
I am making a website for my friend but when using CSS the image doesn't show up.
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
CSS:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Sans-Serif;
font-size: 14px;
background-color: grey;
}
.wrapper {
margin: 30px;
background-image: url(../img/warpper.png);
}
My image is the header menu background but when I try the website it doesn't show up.
4 answers
solution1
1 ACCPTED 2015-01-27 04:46:33
Here is mistake in your HTML
<title>Bobby & Rose | Pillow Service</title>
Solution - JSFIddle
HTML
<title>Bobby & Rose | Pillow Service</title>
CSS
.wrapper {
width: 100%;
background-image: url(../img/warpper.png);
min-width: 100px;
min-height: 100px;
}
If still not working at your end then you should check the path of the image it is incorrect.
solution2
0 2015-01-27 04:46:15
The DIV has no Content therefore the size is 0x0px, means no place to show the image.
Add
width:200px;
height:200px;
to your CSS. Instead of 200px youse what ever you want.
solution3
0 2015-01-27 05:24:45
Determine the size, I also use id instead of class
CSS
#wrapper {
height:200px; <!--on me here -->
margin: 30px;
background-image:url('wrapper.png');
}
HTML
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
</div>
solution4
0 2015-01-27 05:39:12
Just noticed your image name is spelled 'warpper' while the div is 'wrapper'.
Perhaps two letters being switched?
On another note - depending on the size of your image, and how you'd want it to fill the div, you may need to add:
background-size: contain;
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.