CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
johncorser
johncorser

Reputation: 9822

How can I cover a div completely with an image?

So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.

I'm using bootstrap if that helps

<div class="jumbotron">
  <div> I have images and paragraphs inside of me </div>
  <div> I have images and paragraphs inside of me </div>
  <div class="clearfix"></div>
</div>

I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.

Upvotes: 0

Views: 165

Answers (2)

user3832769
user3832769

Reputation:

You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.

Upvotes: 0

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

You could position the image absolutely to cover the text.

.jumbotron{
    position: relative;
}
.jumbotron img{
    position: absolute;
}

You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:

.jumbotron {
    position: relative;
    height: 100%;
    width: 100%;
}
.jumbotron img {
    position: absolute;
}
.jumbotron .covering{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('http://lorempixel.com/400/200/');
    background-size: cover;
}

Upvotes: 3

Related Questions