Scenario
I am building a website for a client, the site works fine locally and externally on desktop but on mobile it doesn't work, the background images are extremely zoomed in. but when i use chrome devtools and change the view to mobile view everything works as expected.
Here is an image of what it should look like.
Here is an image of what it looks like.
Here is the CSS for the header element.
.header {
position: relative;
width: 100%;
height: 100vh;
background: url("../img/header-2.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
Question
Why is this happening, and why is chrome devtools showing as if everything is okay?
If you need anymore information please ask and ill provide.
edit
This is happening specifically on IOS devices. Everyone ive asked to test that has an IOS device has shown me the same screenshot of the image being extremely zoomed in.
Try this
#media screen and (max-width: 992px) {
.header {
background-attachment: scroll;
}
}
Related
I wanted to give my web page background on which all elements will be so I added this to my CSS file:
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And it works as expected on web browsers. The background image is fixed in position and while scrolling, only the elements in body tag moves but not the picture.
BUT that doesn't work for mobile phones...When I open it on my mobile phone that same background picture is shown but zoomed like few times, it won't resize nicely as it looks like when I shrink my web browser on my PC to see a preview on smaller screens.
I tried few pictures, bigger, smaller, different ratios, but nothing helped. I even added
#media screen and (max-width: 479px) {
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}}
so I could have a special picture to be shown on mobile devices but no matter which picture I select/upload it always distorts it with that zoom.
I am using bootstrap and still learning. I have some stock files from some templates which I used but searching through them hoping to find somebody CSS which overwrites my own body CSS and zooms on the image but couldn't find any. heh
On phone fixed background work bad on lot of OS.
So try this :
background-attachment: initial;
Or use body:before to set the background.
More solutions here :
background: fixed no repeat not working on mobile
Try this solution:
#media(max-width: 767px) {
body {
background-size: 100%;
background-attachment: initial;
background-position: center;
background-repeat: no-repeat;
}
}
Your problem is propably in declaration of #media tag. It should be #media(max-width: 767px).
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.
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.
I'm on Ubuntu 14.10 developing a website.
Chrome does not render the background correctly. The bottom renders fine, which is the footer that covers the entire width. However the background of the content div is just white.
See the image for reference (I'm new to Stackoverflow and need more rep to post images):
https://www.dropbox.com/s/rqnlg9eh4k7cbv5/white-background-os.png?dl=0
The problem does not occur on OS X or Windows, and the choice of browser does not affect the problem.
I'm using a Alienware M14X R2, so I thought that maybe the Nvidia drivers could be the problem but they are up to date.
Code for the background:
It only happens on this particular site, so I'm guessing something's wrong with my CSS. What's so weird is that it's just with Ubuntu (and I'm guessing several other Linux distributions as well)
Basically I have this:
HTML (homepage.ejs)
<div ui-view ng-app="myApp" id="wrap-content">
<!--Content swapped with Angular and ui-router-->
</div>
CSS:
#media screen and (min-width: 1024px) {
html {
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;
}
div#wrap-content {
width: 900px;
height: 84vmin;
overflow: hidden;
margin: 0px auto;
position: relative;
top: 45px;
}
... a bunch of other stuff
}
Any help is much appreciated.
Okay so I just solved this by accident. Applying the background to HTML caused this weird problem. Changing it to:
body {
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;
}
Solved the issue. Hope this can be useful to anyone ever having the same problem!
I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.
I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:
#div5 {
height:100%;
width:100%;
position: relative;
background-image: url("img/background.jpg");
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.
At the same time, page 4 has the following css:
#div4 {
min-height:100%;
width:100%;
background:url(img/portfoliobg.jpg);
overflow: auto;
background-size: cover;
}
and this works like a charm.
So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?
Use another div with position:fixed to make the background fixed.
Like this:
http://codepen.io/anon/pen/OVebNg
JADE
.fixed
.bgcover
SCSS
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bgcover {
background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
}
Hope this help.
Short answer: you can’t (for now).
You can play with #media screen and (max-width: 1024px) {} but for now iPad Pro have resolution more then ordinary monitors.
I offer you to disable fixed attachment for mobiles via this way:
Main CSS file:
.parallax {
background-attachment: fixed;
background-size: cover;
}
Main HTML
<script type="text/javascript">
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
}
</script>
Additional fixparallax.css
.parallax {
background-attachment: scroll !important;
}