0

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:

enter image description here

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:

enter image description here

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.

IE5Master
  • 413
  • 1
  • 3
  • 14
  • show your code please! – AleshaOleg Aug 08 '15 at 02:00
  • 3
    Have you tried background-size: contain; or background-size:cover? – Bryan Mudge Aug 08 '15 at 02:08
  • 1
    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 08 '15 at 02:18
  • I don't exactly understand what you want:( – AleshaOleg Aug 08 '15 at 02:37
  • You have different code in fiddle and in pictures, can yous present same code? Also you can try @media (min-height: xxx px) – AleshaOleg Aug 08 '15 at 02:49
  • Not sure why people are up voting "Have you tried background-size: contain; or background-size:cover?" I have already tried those and it didn't work – IE5Master Aug 10 '15 at 14:13
  • We should remove these unnecessary comments. – IE5Master Aug 10 '15 at 14:14

1 Answers1

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 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. – Michael Benjamin Aug 08 '15 at 02:51
  • 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. – IE5Master Aug 08 '15 at 02:56
  • 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. – Michael Benjamin Aug 08 '15 at 02:57
  • That is it. To bad there isn't another shorter way to do this. A lot of media queries for me to write. – IE5Master Aug 08 '15 at 03:22