Menu
what's wrong with this code?
The background disappears behind the divs when I add float: left to #text and #text2. But when I remove the float: left, everything looks good.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#first{
width: 200px;
background-color: #345752;
}
#left_b{
background:transparent url('img/left.png');
background-position: left top;
background-repeat: repeat-y;
min-height: 30px;
}
#right_b{
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
}
#text{
float: left;
width: 50px;
height: 30px;
}
#text2{
float: left;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<div id = "first">
<div id = "left_b">
<div id = "right_b">
<div id = "text">text 1</div>
<div id = "text2">text 2</div>
</div>
</div>
</div>
</body>
</html>
912
Assuming that your . png file actually exists, try setting the background size and repeat tags. If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.
To set a background color for a div or related element in CSS, you use the background-color property. While setting this background color, your creativity is your limit as to how far you want to go.
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
To overwrap one div on another (make an overlay) you have to put them into same element, in this example it's #wrapper div. Put position: relative and width/height for wrapper; position: relative also should be set for your content div and position: absolute; top: 0; left: 0; for your background.
You container div #right_b is collapsing because its children are floating. You can fix this with the "Clear-Fix" technique. You may want to check out the following Stack Overflow post for a few solutions:
One popular solution is to add overflow: hidden to your container div: #right_b:
#right_b {
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
overflow: hidden;
}
Another common one is to add a <div style="clear: both;"> </div> before closing your container div:
<div id="first">
<div id="left_b">
<div id="right_b">
<div id="text">text 1</div>
<div id="text2">text 2</div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
