background-size: contain too much whitespace when changing browser size

Question

How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?

The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html

CSS is:

body { 
    margin:0px 0px; 
}

#hero {
    background-clip: content-box;
    background-image: url("imgtop.png");
    background-size: contain;
    background-repeat: no-repeat; 
    position: relative;
    height: 235vh;
}

#content {
    padding: 100px 50px;
    text-align: center;
    width: 80%;
    margin: 0px auto;
}

#content h2 {
    margin: 0px 0px 30px 0px;
}

#footer {
    padding: 30px 0px;
    text-align: center;
    background: #ddd;
}

I think cover is responsive, but is there a way to still have the cloud without the cutoff? I tried contain because of that reason, but cover does fix the whitespace issue. Is there maybe something else that works besides cover or contain? — AmyCarter, Oct 16 '15 at 17:28
or is there something I can do with contain to stop the whitespace issue like how cover stops it from happening? — AmyCarter, Oct 16 '15 at 17:39

Roko C. Buljan · Accepted Answer · 2015-10-23T19:38:11.720

2

jsbin demo

You want to go fully responsive but keep the white clouds at the bottom?

Use two background images for the same element.

Cut out the white bottom clouds save as separate .png image. Use as first background-image.
(optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.

Now in CSS:

set the clouds to background-position: bottom and 100% size ("width")
Set the bigger image to center (50%) position and cover

CSS

html, body{height:100%; margin:0;}

#hero{
  position:relative;
  height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
  background: no-repeat 
    url(https://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
    url(https://i.stack.imgur.com/IVgpV.png) 50% / cover;   /* BIG IMAGE */
}

HTML

<div id="hero"></div>

<div class="other">
  <h1>Other Divs</h1>
  <p>bla bla</p>
</div>

Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:

#hero{
  position:relative;
  height: 900px;
  height: 100vh; 
  background: url(https://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(https://i.stack.imgur.com/IVgpV.png) 50%;
  background-size: 100%, cover;
}

edited Oct 23 '15 at 19:38

answered Oct 16 '15 at 17:07

Roko C. Buljan

196,159
39
305
313

`cover` it's not responsive. When you change the browser size background remains the same size – Kristijan Iliev Oct 16 '15 at 17:12
@Chris you *think* `cover` is not responsive or you **know** it's not responsive – Roko C. Buljan Oct 16 '15 at 17:13
`cover` will try to fit as much as possible space, and `contain` will try to fit as much as possible space in both width and height. http://www.w3schools.com/cssref/css3_pr_background-size.asp Try it on OP link and see yourself that cover doesn't solve the problem – Kristijan Iliev Oct 16 '15 at 17:15
@Chris I see that the answer might not be too appropriate for OP needs - since he probably wants all the image clouds to be visible - but please, Did you know w3schools has done only harm to the programming community? Di you know that they sell fake diplomas and the content is not maintained and edited by a programming community? There's better docs resources than w3schools. Also, `cover` is used exactly for the purpose of responsiveness - so yes, it's responsive. A lot. http://stackoverflow.com/questions/25799055/how-to-fade-loop-background-images – Roko C. Buljan Oct 16 '15 at 17:21
yes indeed `cover` is responsive, but not the best solution for this exactly problem. – Kristijan Iliev Oct 16 '15 at 17:32
thanks for the answers. Cover does work but it cuts off the bottom where the clouds are. Perhaps it needs to be done in some other way? Could anyone point me in the right direction? :) – AmyCarter Oct 18 '15 at 20:31
@AmyCarter edited my answer to show you an example of how to do it the best way and keep it responsive for all browsers. – Roko C. Buljan Oct 18 '15 at 21:57
Thank you, that works perfect! Thank you so much to everyone for helping. – AmyCarter Oct 19 '15 at 15:45
Thanks for the help again. I hate to ask, but is there any reason this wouldn't show in safari?The page is blank in that browser. Does it need a web-kit or something? – AmyCarter Oct 23 '15 at 14:45
@AmyCarter I cannot install Safari on Windows. Try to debug using i.e: 900px instead of `100vh`... – Roko C. Buljan Oct 23 '15 at 15:52
I have it installed on my windows. This site is for a friend of mine and he has mac, and he can't see it because it is just white. It isn't working on safari for windows either, and the 900px didn't fix it. – AmyCarter Oct 23 '15 at 18:58
@AmyCarter I see no reason it should not work http://caniuse.com/#feat=multibackgrounds have you opened my jsBin demo on a Safari? Does my demo works? – Roko C. Buljan Oct 23 '15 at 19:06
@AmyCarter ohh, I managed to test on safari. **This should work on Safari** http://jsbin.com/vireda/5/edit?html,css,output – Roko C. Buljan Oct 23 '15 at 19:36
you rock, thank you so much! I am going to save this so I know how to do it next time. <3 – AmyCarter Oct 23 '15 at 20:17

background-size: contain too much whitespace when changing browser size

1 Answers1