I'm using these rules and looks fine on desktop and firefox mobile:
body{
background: url(../img/home-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
But on mobile webkit browsers (safari and chrome), the image appears wrong, with zoom.
The problem comes probably from the fixed position on your background image. It's a common issue on Sarafi mobile.
Related
So I used Chrome Dev tools to check the responsiveness on an iphone and it looks fine. But when I check out the site on my actual iphone the background is completely different. Here is the link to my code https://github.com/CurtisKil/manesseGrading_2
How it looks on Devtools
How it actually looks on iphone
The problem here is:
background-attachment: fixed; does not work well with most browsers and especially does not work properly on iOS. (Read more here on why: How to replicate background-attachment fixed on iOS)
Quick Fix:
Don't use Background attachment fix for iOS.
So change your code in style.css from:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }
To:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }
Alternate Solution:
Find workarounds for making background-attachment:fixed work for different browsers. Here is something to get you started:
Fixed background image with ios7
Fixed body background scrolls with the page on iOS7
I have a not so unusuall problem but either my google skills suck or I don't know how to ask and find solutions to my problem.
I am using bootstrap3 to build my website which looks fine on IE 8 except for a banner part.
The outer .row div is 100% with a background image covering the full with. Inside the div, I have a .container div has centered content leaving some space on both ends.
In all browsers except IE8, this design works fine but on IE, the background image only goes as far as the .container leaving white space on both edges.
Here is my css
.heading
{
background: url(../images/inner-heading-bg.png) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 50px;
min-width: 100%;
}
Please see attached image for IE
IE8 doesn't support background-size: cover; by itself, it needs a little push in the back.
You can use a polyfill like: https://github.com/louisremi/background-size-polyfill to get it working in IE8.
I have a div where I set the background to fixed so that it has that the content scrolls over it. Just to clarify this is not for the entire page, just for a div.
It works in chrome and firefox (latest versions) but it doesn't work in safari (desktop or ios). I know I am using an old safari for desktop but it's because my computer doesn't support the later versions :(
Couldn't find any resources on this, Only referring to the body.
please use the below css style to make background fixed and to work in all the browser :)
.div_image{ background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
background: #27AE61 url("../images/banner.png") no-repeat scroll center center / cover;
The above CSS is working properly in firefox, google chrome and internet explorer but not on safari 5.7.1. Why ? What is the solution?
Try writing your css in long manner instead of shorthand way, like this:
background-color: #27AE61;
background-image: url("../images/banner.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
It looks the said version of Safari does not support shorthand css for background.
I have an image for a background for a div that doesn't exactly fit. Is there a way, using css, to change the size of the image (e.g. background-size:10%)?
.header-tab { background: transparent url(/resources/images/light-green-gradient.png) repeat-x scroll 0 0; }
background-size is a css3 value which can be set
see: http://www.w3.org/TR/css3-background/#the-background-size
or use this method
http://css-tricks.com/how-to-resizeable-background-image/
background-size isn't implemented yet in any browser, but there is -*-background-size for the newest versions of Mozilla, Webkit, Konqueror and (buggy) Opera:
background-size: 10%;
-moz-background-size: 10%;
-o-background-size: 10% auto; /* Opera needs x AND y values, or no background! */
-webkit-background-size: 10%;
-khtml-background-size: 10%;
Don't use it in Opera together with background-attachment:fixed.
Mozilla Developer Center has more and a workaround for Firefox 3.5.
For older browsers, you can emulate it with an img like in Jimmy's second link, but then of course you'd have to figure out how to hide that image from new browsers.