My background image is not showing on iOS devices, it becomes grey.
I can't test it on windows and also can't afford to upload every 10 sec a new fix.
I found many different answers on internet, I already tried some but none of them worked for me.
Here is my CSS code:
.img-bg-index {
background-image: url("../img/Monteurzimmer-BG.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center right;
background-size: cover;
min-height: 95vh;
position: relative;
}
The background attachement caused the problem, it seems that it is disabled in safari browsers:
How to replicate background-attachment fixed on iOS
I used a media query and changed the background-attachment to initial on a certain max-width:
#media ( max-width :856px) {
.img-bg-index {
background-attachment: initial;
}
}
Related
Trying to fix the issue with the background image for my title div to make it fully responsive.
Issue is: the size of the background image blows up on iPad Pro in landscape.
It works correctly on desktops, also shows up correctly in Chrome Dev tools for responsive/iPad Pro landscape. The only instance I currently observe this issue is - iPad Pro landscape (both Safari and Chrome).
See code and screenshots attached.
Website: rita.im
Size of title.jpg file is 2464 × 1632
CSS for the Div
`.bgimage {
position: relative;
background-image: url(../img/title.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: top center;
width: 100%;
height:100vh;
bottom: 0;
overflow: hidden;
background-attachment: fixed;
background-color: #fff;
margin: 0;
padding: 0;
}`
Chrome Dev tools preview
Actual iPad Pro landscape display
Thank you! Will post answer if I resolve the issue myself first.
background-attachment: fixed;
, which was there for "parallax" effect seems to have been the problem. Without it, background images display at correct scale. Will have to find a way to add parallax for banner on iOS with JavaScript.
How could I use background fixed property on iOS devices considering this CSS:
.sfondopertutti {
background-attachment: fixed !important;
background-image:url('../../sfondo.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-position: center center;
background-size: cover !important;
}
Works everywhere except on iPhone and iPad? I know this is an old question but I've found only old wrong solution to the problem and I don't know what to do.
Using a position:fixed div with background prevents page scrolling.
I have a background image in one of my element (code is on a separate file, style.css), it loads fine in most of the devices (iphone5, iphone5c, samsung galaxy), BUT NOT in iphone6 and iphone6plus (and some of ipad). Do you guys have any idea why?
.content-block {
background-image: url('image/img.jpg');
background-size: cover;
background-repeat: no-repeat !important;
background-position: center center;
min-height: 500px;
margin-bottom: 50px;
}
For a start, try using the shorthand version which allows for a more consistent background setting.
background: url('../image/img.jpg') no-repeat center center / cover;
As you can see I added ../ before your image directory, just in case the browser can't find its way to it.
You can find more thorough explanation about CSS shorthand usage which I am referring to, at the Mozilla Developer Network (MDN)
I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue?
I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com
ul#posters li {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
height: 170px;
position: relative;
width: 25%;
}
It appears webkit doesn't cache the resized image and renders it every time, causing the lag.
You're out of luck when it comes to background-size in chrome.
I've seen people do it with Javascript / jQuery. See http://srobbin.com/jquery-plugins/jquery-backstretch/
I'm using the new CSS3 spec "background-size" to have a background image that slightly overflows the size of the page. It's working fine in webkit (Chrome & Safari) but the "-moz-background-size" property is not working at all in Firefox. The unusual thing is, if you view the site live, the "-moz-background-size" property IS showing when viewing the site with Firebug! The FF docs say that it is supported as of 3.6 and I'm running 3.6.
Here's my code:
#media screen and (max-width: 1150px) {
/* special sytles for browser windows less than 1150px */
body{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
#trans_fake{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
}
Any debug suggestions?
EDIT
I'm more confused now... QuirksMode.org is reporting a "white" box rather than red or green to indicate css3 background-size percentage-based compatibility in Firefox 3.6 :(
http://www.quirksmode.org/css/background.html
I was running into the same issue this morning and what solved it for me was making sure the image was listed ahead of the background-size property. It was working in one instance and not in another. Why? The order of the CSS properties. Try this.
.front #logo {
height: 58px;
width:323px;
margin-left: 10px;
background:url(../imgs/logo-x2-retina.png) no-repeat;
-o-background-size: 100%;
-moz-background-size: 100% auto;
-webkit-background-size:100%;
background-size: 100%;
margin: 0 auto;
This turned out to be a CSS mistake on my part, I had a
body{
background:url() top center no-repeat;
}
later down the page which was somehow overridding the Firefox "-moz-background-size: 130%". So, if you're having trouble, give
body{
background-size: 130% !important;
}
to your CSS in Firefox and it might solve the problem.
Your page looks the same to me in Firefox 3.6, Firefox 4.0 and Chrome, but I can't see any background-size in any of it? Do you have a link to a page that actually demonstrates the problem?
My initial suggestion would be to specify both width and height and see if that works:
-moz-background-size: 130% 130%;
Change your CSS background from
background:url(../imgs/logo-x2-retina.png) no-repeat;
to
background-image:url(../imgs/logo-x2-retina.png);
I am wrote:
background-size: 100% 100%, auto;
And all work