Can't get background image to show in div?
Question
AS the subject outlines, the background div will not show, I thought you needed to define the width and height, but this doesnt work, ive checked the names and filepaths and these all seem ok.
<head>
<link rel="stylesheet" type="text/css" href="css/invoicestyle.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/ATT3006209.jpg" /></div>
<div id="card"><img src="images/ATT3006207.jpg" /><br /><img src="images/ATT3006208.jpg" /></div>
<div class="clear"></div>
<div id="tagline"><p>Tagline goes here</p></div>
</div>
<div id="bar">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
</div>
</body>
body{
background:#FFF;
font-family:Arial;
font-size:12px;
}
.clear{
clear:both;
}
#wrapper{
width:1000px;
margin:auto;
}
#logo{
float:left;
}
#card{
float:right;
}
#card img{
padding-bottom:5px;
}
#bar{overflow: hidden;}
#left{
background: url("images/left.jpg") no-repeat;
width:10px;
height:50px;
float:left;
display: block
}
#middle{
background: url("images/mid.jpg") repeat-x;
width:980px;
height:50px;
float:left;
display: block
}
#right{
background: url("images/right.jpg") no-repeat;
width:10px;
height:50px;
float:right;
display: block
}
4 answers
solution1
4 2012-03-25 20:01:14
You cannot set the background-repeat property inside the background-image one. Either make that background on its own, or move the repeat stuff onto its own background-repeat property, as it should be.
solution2
0 ACCPTED 2012-03-25 20:06:16
try to add
#bar{overflow: hidden;}
I am not sure if your css for .clear is correct because you did not paste it, it might be the case it is not. Please let me know whether the problem still exists.
solution3
0
#bar
{
width:100%;
height:100%;
}
now i use your code in my project. and i add this code its working in my project.
solution4
0 2012-03-25 20:07:03
Does this help?
#bar {
background: orange;
width: 100%;
height: 10em;
}
#left{
width:10px;
height:50px;
float:left;
background-color: black;
background-image: url(images/left.jpg) no-repeat;
}
#middle{
width:980px;
height:50px;
float:left;
background-color: blue;
background-image: url(images/mid.jpg) repeat-x;
}
#right{
width:10px;
height:50px;
float:right;
background-color: black;
background-image: url(images/right.jpg) no-repeat;
}
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.