Getting a parent div's background image to show through

Question

I have a horizontal band on my webpage which is a div class called horizontal-strip, and I have sub-divided this into 2 separate classes called left-horizontal and right-horizontal, so I can have a list of news headlines on the left-hand half and an email signup form on the right-hand half. The horizontal-strip div has a background image, but now that I've added the left-horizontal and right-horizontal classes, the image is not showing through.

.horizontal-strip {
    background: url("ColBackground.png") scroll center top repeat;
    margin: auto auto 10px;
    padding: 5px;
    width: 950px;

}

.horizontal-strip .left-horizontal {
    float: left;
    width: 450px;

}

 .horizontal-strip .right-horizontal {
    float: right;
    width: 450px;

}

This is what the HTML code looks like:

<div class="horizontal-strip">
    <div class="left-horizontal">
        <h1>Top Stories</h1>


        <ul class="news-listing">
        <li>list of links here... </li>
        </ul>

    </div>  <!-- Closes left-horizontal div -->

    <div class="right-horizontal">

        <h1>News Sign-Up</h1>
        <p>Enter your email address below to receive automatic updates when a new story is added.</p>

        <form action="">
            Email: <input name="email" type="text">
            <input name="submit" value="Submit" id="submit-button" type="submit">
        </form>

    </div>  <!-- Closes right-horizontal div -->
</div>  <!-- Closes horizontal-strip div-->

Can anyone tell me why the background image isn't showing through?

score 3 · Accepted Answer · answered Jul 13 '11 at 14:55

3

You've not cleared the float. Add overflow: hidden to your .horizontal-strip { }. This will clear the float and make the wrapper fill to contain the contents.

answered Jul 13 '11 at 14:55

No probs, glad to be of service! Check out http://www.quirksmode.org/css/clearing.html#link3 for more info on this float clearing method. – Jul 13 '11 at 14:59

score 0 · Answer 2 · edited May 23 '17 at 11:55

From "Opacity of background, but not the text"

.yourClass {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0 opacity */
background-color: rgba(0, 0, 0, 0);
/* For IE 5.5 - 7 */ - /* first two numbers in #00000000 define opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
/* For IE 8 */ - /* first two numbers in #00000000 define opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}

I hope this works for you :)

score 0 · Answer 3 · answered Jul 13 '11 at 14:57

0

If you add another div with style clear:both after right horizontal div closes and before horizontal strip div close i.e. before last line it should fix the background.

answered Jul 13 '11 at 14:57

Jawad Rashid

36
1
5

Getting a parent div's background image to show through

3 Answers3