从div溢出的背景

Question

I am designing a page which has the following HTML structure.

<div id="event">
    <div id="event-image">
        <div id="event-image-background">               
        </div>
        <img src="image_url_here">
    </div>
     <div id="event-title">
            EVENT 1
     </div>
    <div id="event-details-summary">
       Event Summary Here
    </div>
    <div id="event-description">
    </div>
</div>

And I am using the following CSS for the structure.

#event{
position: relative;
}
#event-image{
text-align: center;
margin: 0px auto;
border: 1px solid #fff;
box-shadow: 0px 5px 10px -7px #CCC, -5px 10px 10px -7px #CCC;
overflow: hidden;
}
#event-image-background{
 background: url('image_url_here') no-repeat;
background-size: cover;
opacity: 0.1;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
#event-image img{
opacity: 1;
z-index: 3;
border: 1px solid rgba(204, 204, 204, 0);
}

The problem I am facing is that the background that I have applied to event-image-background is overflowing into the other divs, namely event-title and others that follow. I am not really good at CSS, and have no clue what's going wrong. Kindly help.

Thanks :)

PS: I dont really want to use the max-height option, as the image that I will be adding via img src will have variable height for each event.

Answer 1

Try adding overflow: hidden; to #event-image-background .

Protip, I'd recommend favoring styling on classes (eg .event-image-background and <div class="event-image-background"> ) rather than ids. See: http://css-tricks.com/the-difference-between-id-and-class/ .