Fixed background image without a set height

Question

I have a div element that must have a background image that is fixed so when you scroll the content rolls over it. My issue is that I have to set a height for that specific div element in order to see it. That is because there isn't any content in that div.

CSS

#top-banner{
    background-image: url(../img/grey.jpg);
    background-attachment:fixed;
    height:700px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

HTML

<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-12" id="top-banner"></div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center" >
            <h1 class="band-name">Lorem Ipsum</h1>
        </div>
    </div>
</div>

This gives me what I want for larger screens:

But as you shrink the browser, like you are on a phone or tablet, the height for that div pushes all the content down making it look unappealing:

Is there a way to not give it a specific height so the content is not pushed down on smaller screen but still have the fixed background image?

EDIT Here is a fiddle to check out. http://jsfiddle.net/0xbfhwnt/

I reiterate: It looks fine at first but when you make the browser smaller the image shrinks like it is supposed to but the height of the div stays keeping the content below the image instead of flush with the background image div.

Have you tried background-size: contain; or background-size:cover? — Bryan Mudge
– Bryan Mudge, Commented Aug 8, 2015 at 2:08
I'm not entirely sure I understand the question -- so you have a fixed background image that is pushing things down when you go to smaller screens? That background image is fixed though so it shouldn't actually be "pushing anything down" because its out of the document flow. Perhaps create a jsFiddle? — aug
– aug, Commented Aug 8, 2015 at 2:18
You have different code in fiddle and in pictures, can yous present same code? Also you can try @media (min-height: xxx px) — AleshaOleg
– AleshaOleg, Commented Aug 8, 2015 at 2:49

Michael Benjamin · Accepted Answer · 2015-08-08 03:19:54Z

2

Have you considered something along the lines of media queries?

Here's a first iteration:

http://jsfiddle.net/0xbfhwnt/2/

@media (min-width: 400px) and (max-width: 700px) {
 #top-banner{
    height: 200px;   }

}

@media (min-width: 200px) and (max-width: 399px) {
 #top-banner{
    height: 100px;   }

}

UPDATE

So, using media queries, you can track the size of the main div all the way down to the smallest screen size.

In this example, all the whitespace is gone.

http://jsfiddle.net/0xbfhwnt/7/

@media (min-width: 500px) and (max-width: 800px) {
 #top-banner {
    height: 200px;}
}

@media (min-width: 375px) and (max-width: 499px) {
 #top-banner {
    height: 150px;}
}

@media (min-width: 250px) and (max-width: 374px) {
 #top-banner {
    height: 100px;}
}

@media (min-width: 50px) and (max-width: 249px) {
 #top-banner {
    height: 50px;}
}

Of course, the smaller the range between min-width and max-width, the smoother the transition would be.

edited Aug 8, 2015 at 3:19

answered Aug 8, 2015 at 2:45

Michael Benjamin

375k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Benjamin Over a year ago

Not sure why the downvote. This answer directly answers the question asked. The OP says: I want the white space to go away on smaller screens. If I'm misinterpreting the question, I'm open to feedback.

IE5Master Over a year ago

You are not misinterpreting. I have media queries in my css already and have tried this already with no success. In first iteration of your fiddle there is still white space when the screen gets smaller.

Michael Benjamin Over a year ago

Right. The values need to be adjusted. That's why I said first iteration. But I wanted to know if the concept appealed to you. Otherwise I wouldn't pursue it.

IE5Master Over a year ago

That is it. To bad there isn't another shorter way to do this. A lot of media queries for me to write.

Collectives™ on Stack Overflow

Fixed background image without a set height

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related