Background-color disappears when over an element

Question

I have two Twitter Bootstrap 3 containers. The first container has a simple image inside it, the second one contains some text loaded from The Loop. I would like the second container to overlap the first one a little bit.

I tried setting a negative margin-top for the second container and a negative margin-bottom for the first one. It works, as for moving the text, but background-color of the second container just doesn't overlap the image. Only text does that.

It looks as if the second container's background-color disappeared under the image from the first container.

Could you please help me with that? I want the background-color of the second container to overlap the first container's image. Just as it is already done with text.

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 singlePostCoverContainer">
            <?php the_post_thumbnail('full', array('class' => 'center-block singlePostCover')); ?>
        </div>
    </div>
</div>
<div class="container singlePost">
    <div class="row titleRow">
        <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <p>TEST</p>
        </div>          
        <div class="col-sm-9 col-sm-pull-3 col-xs-12 post">
            <span class="catDescription">XXX</span>
            <h4><?php the_title(); ?></h4>
        </div>
    </div>
</div>

LESS (it is being compiled to CSS, shouldn't be that much of a problem to read for people who know CSS):

div.singlePostCoverContainer {
    img {
        margin-bottom:-200px;
    }
}

.singlePost {
    background-color:white !important;
}

Do you have any concerns in relatively positioning the `.singlePost`. [This](http://codepen.io/hari_shanx/pen/yyyBzE) is one possible option. Not sure if you are trying to avoid this for any reason and hence not adding as answer. — Harry, Nov 18 '14 at 03:02
@Pe-Ter: Does the example I gave in the previous comment work for you? — Harry, Nov 18 '14 at 14:32
Oh my, excuse me @Harry for that. I didn't see your first comment. It works! Please submit it as an answer, I will mark it as correct. I can't believe that I forgot to set it as position:relative! — NakedCat, Nov 18 '14 at 14:40

score 4 · Accepted Answer · answered Nov 18 '14 at 14:44

4

As discussed in comments, relatively positioning the second container (the one which has the title) would be enough to get the background color to display properly.

.singlePost{
    background: white;
    position: relative; /* added this */
    width: 100px; /* only for demo */
    margin-left: 40px; /* only for demo */
    margin-top: -200px; /* just removed the bottom margin on img and added this */
}

Note: I had removed the margin-bottom on img and added a negative margin-top on the container but that change is purely optional as either way is fine.

CodePen Demo

answered Nov 18 '14 at 14:44

Harry

87,580
25
202
214

Thanks! And once again sorry for missing out on your first comment to the question :). – NakedCat Nov 18 '14 at 14:46
@Pe-Ter: No worries mate. Comments are second-class citizens anyways. By the way, Bass' answer isn't wrong either. I haven't read it fully but I think he has used added both inner containers into a parent container and used absolute positioning. Let me see if I can help create a sample for it. – Harry Nov 18 '14 at 14:48
Yes, but I must have two separate containers instead of one, that's very important for me, as the fluid container allows the image to be full-width and the fixed container keeps the content in a good shape between breakpoints. – NakedCat Nov 18 '14 at 14:50
1

Got you. I meant to say, that is one of the ways to achieve a similar effect. But as always, only you would be the best judge of what suits your situation the best. Cheers :) – Harry Nov 18 '14 at 14:54

score 0 · Answer 2 · answered Nov 18 '14 at 09:30

You should set position:relative for the parent container and position:absolute for your overlapping row.

.imagecontainer {
position:relative;
}   
.titlerow{
width:100%;
position:absolute;
bottom:0; 
background-color:white;

/* see: http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */
}
[class^="col-"] {
 padding: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid imagecontainer">
<div class="row"><div class="col-xs-12"><img src="http://dummyimage.com/1500x600" class="img-responsive"></div></div>
<div class="row titlerow">
 <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <p>TEST</p>
        </div>          
        <div class="col-sm-9 col-sm-pull-3 col-xs-12 post">
            <span class="catDescription">XXX</span>
            <h4>The title</h4>
        </div> 
</div>

It doesn't seem to work for me. Also, I would like to have two separate containers for that, because the first one is full-width, the second one is fixed for each viewport. Is that possible? — NakedCat, Nov 18 '14 at 14:04

Background-color disappears when over an element

2 Answers2