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.
Related
I've some trouble with a parallax background image on mobile. When it's displayed on mobile the image is zoomed right in so I cannot see what it is, it doesn't matter if I use it in landscape or portrait. The same problem occurs also on tablet.
I tried it with background-size: 100% auto; now you can see it, but it's just plain ugly.
Also tried background-size: contain; but that also didn't do the job and messed up the desktop view too.
Also the parallax function isn't working on mobile either way but that doesn't matter to me.
The same problem occurs also on tablet.
Here's what you see on mobile, when I use background-size: cover;
Here's what you see on mobile, when I use background-size: 100% auto;
.intro {
position: relative;
width: 100%;
height: 100%;
color: #fff;
background-color: #111;
min-height: 600px;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
background-attachment: fixed;
}
<section id="intro" style="background-image: url('img/background.jpg'); no-repeat;" class="intro">
I'm thankful for any help
P.S. i'm new here, so I hope I asked the right way :)
background-size:cover would be the right way to go in your case.
The reason it's zoomed in is because background-size: cover tries to fill the full viewport (which you defined with height:100% and width:100%). Your image is just not optimized for mobile phones. I bet if you hold your Phone in landscape mode it would look nice. This is because your image has a higher width than height.
I'd suggest using a second image which you then use on mobile devices. You can use a basic image editing tool such as paint, or paint.net to cut out a piece of your image that will work on your mobile phone.
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;
}
}
I am using this CSS to create a parallax effect with images that are the background of section elements.
background-image: url(./../img/intro.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
When I view the site on iPads or iPhones the images are crazy zoomed in and distorted. Research would have me believe that on these devices the images are being stretched to the size of the body. I have tried so many fixes from various forums etc but to no avail. I am really surprised there is no concrete fix for this as it seems quite common.
I am having trouble setting my background image to where it is centered on the screen as you scroll down on a mobile device.
Currently, my website's background when scrolling on my desktop is as how I want it to be. The problem is on mobile devices and for some reason when using dev tools to view the site on mobile resolutions it works great but when it comes to real practice, it does not work.
Can anyone please help me figure this out?
My current code is:
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
}
My website is: test.ebdesigns.us
(wordpress platform)
Also, when viewing source-code something is producing this and do not know. This might be affecting it.
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url('http://www.test.ebdesigns.us/wp-content/uploads/2015/07/NewColumbis51Logorev101.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; }
</style>
Actually some plugin is sending this "body.custom-background" your CSS, but this is not the case
Change your code to say > background-position : "top center", instead of "center center". That will do
**If you want to preserve the center center you have to provide a height to your main container(body)
body.custom-background, #custom-background-css {
background-position: center center !important;
min-height: 100%;
background-repeat:no-repeat;
background-attachment: fixed;
height:100vh;
}
Cheers. joy
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>