background image displaying incorrectly when browser is narrow

Question

On this page I have 2 background images:

(1) A blue sunburst that is set as a background image of <html>

html {
    background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
    outline: 0 none !important;
}

(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page

Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:

enter image description here

and at the bottom

enter image description here

of every page. Previously I used

background-size: cover;

for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.

score 2 · Answer 1 · answered Mar 23 '13 at 22:12

2

If you're not opposed to a JS solution, you could try using Backstretch.

answered Mar 23 '13 at 22:12

pdoherty926

9,895
4
37
68

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

The white space is due to the browser positioning the image center center as defined in the CSS.

html {
    background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
    background-size: 100%;
    outline: 0!important;
}

I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.

However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your @media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 23 '13 at 22:26

andyb

43,435
12
121
150

If something in CSS works in majority of the browsers, and if it is logical, then screw Chrome, I would use it even if it won't work, I won't build websites according to browsers. – Ali Bassam Mar 23 '13 at 22:34
But if it's a Webkit bug then it wouldn't work on Safari either. Not many iPhone users using something other than Safari or Chrome I suspect. – andyb Mar 23 '13 at 22:41

score 0 · Answer 3 · answered Mar 23 '13 at 22:28

0

Set the background-size to something larger than 100%. I think 200-250% will cover that area.

background-size:220%;

One side effect this has is the fact that it causes slight lag due to the size.

answered Mar 23 '13 at 22:28

bukka

4,973
3
19
21

score 0 · Answer 4 · answered Mar 23 '13 at 22:54

0

Here, Have this solution...

In this file...

http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css

On line no 793,

this code is there in the last part of that line...

html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}

Add this property : background-position: 0px 0px;

Making the code:

 html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}

And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..

Hope you get the point.

Regards

answered Mar 23 '13 at 22:54

Mohd Abdul Mujib

13,071
8
64
88

Please correct me if I'm wrong but with this solution the background will not extend to the bottom of the page when the window width is < 500px – andyb Mar 24 '13 at 10:02
well thats how the backgrounds work :P, and btw he can always repeat the background, if the width fall too short. Theres also one other option i'd like to mention.. viz. add the background size property as shown below... background-size:100% 100%; – Mohd Abdul Mujib Mar 25 '13 at 22:16
...continued. This way the background will always try to fill the page to its brim, have just one drawback which is, the aspect ratio of the background will be distorted if the dimension on the window of the browser is not in multiples of the aspect ratio of the image... BUT since the OP is using SVG as the background, there's really not much of a difference. – Mohd Abdul Mujib Mar 25 '13 at 23:14

background image displaying incorrectly when browser is narrow

4 Answers4