9

I need the following:

  • emtpy div with no content
  • background image set to the div the
  • background image to be fluid/responsive on re-size I cannot set fixed
  • dimensions on the div

Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }
john-marcello
  • 245
  • 3
  • 6
  • 16
  • I would be willing to see your efforts. Pls post a JSfiddle link of your work and a screenshot of the output you want. – Nitesh May 15 '13 at 11:25
  • added link to site and code snippet above. – john-marcello May 15 '13 at 11:31
  • Background will be according to the size of your Div. So if the size of your div is not set then the backgroud image will display as per the size of div. – Sandeep Kumar May 15 '13 at 11:40
  • I cannot set the size of the DIV because I need it to be responsive...any suggestions? – john-marcello May 15 '13 at 11:42
  • You can see the answer from [here](http://stackoverflow.com/questions/10830895/how-to-set-div-dimensions-as-per-the-height-and-width-of-background-image) in this case you need to check the height and width of image on load and need to set the div size. – Sandeep Kumar May 15 '13 at 11:44
  • I am not sure I follow...can you give it to me really basic, like 101 style because this makes no sense to me. And does onload mean that once it loads it is set or will it collapse gracefully on browser re-size? – john-marcello May 15 '13 at 11:53

4 Answers4

35

The way to lock a height's aspect ratio to it's fluid width is to use padding-top or padding-bottom percentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.

html

<div class="top_banner"></div>

css

.top_banner {
    background-image: url('images/bg_front.jpg');
    background-size: 100%;
    width: 100%;
    padding-top: 54.166666666667%;
    height: 0;
}

Example: http://jsfiddle.net/SsTZe/156/

Essentially the same question: CSS fluid image replacement?

Community
  • 1
  • 1
Warren Whipple
  • 1,060
  • 2
  • 9
  • 18
  • where do you get 54.166666666667% for padding top? – Memor-X Oct 14 '15 at 01:09
  • 3
    This is an excellent technique which bypasses the problem of having to explicitly state the height. More than just saying thanks--I also want to draw others' attention this answer. – weezilla Sep 25 '16 at 02:31
  • This should be the accepted answer. Thanks Warrent Whipple – pmont Jan 17 '17 at 06:41
1

You can handle it after applying CSS 

 #DivName{
  background-size: auto auto;
     }

here first auto is for width and second is for height

Sandeep Kumar
  • 783
  • 1
  • 5
  • 13
1

Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):

.my-div {
     background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
     background-size: 100% auto;
     width: calc(100vw - 350px);
     height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}
David Bodow
  • 688
  • 5
  • 15
0

Try to use medie queries in your CSS for different screen sizes to handle different fixed heights. For example:

@media (min-width: 1200px) { 
    div { height: 3em; } 
}
@media (min-width: 768px) and (max-width: 979px) { 
    div { height: 2em; } 
}
@media (max-width: 767px) { 
    div {  height: 1.2em; } 
}
@media (max-width: 480px) { 
    div {  height: 1em; } 
    }

etc. what you need to customize. You can leave the div width 100% to fit for all screen and the background-size:cover. You can also make different size backgrounds (diff. files) for each screen sizes to give less size to your website for mobile or tablet devices.

danielnagy
  • 58
  • 1
  • 8