CODEWITHSUNDEEP
htmlcss
Dónal
Dónal

Reputation: 187537

background image displaying incorrectly when browser is narrow

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.

Upvotes: 2

Views: 259

Answers (4)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

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

Upvotes: 0

bukka
bukka

Reputation: 5203

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.

Upvotes: 0

andyb
andyb

Reputation: 43823

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.

Upvotes: 2

pdoherty926
pdoherty926

Reputation: 10359

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

Upvotes: 2

Related Questions