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.
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).
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.
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;
}
}
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!
My site is essentially a row of alternating full-width divs and images.
I'm experiencing weird behavior on mobile devices (iPhone and iPad, specifically). The page loads fine. When I rotate the phone, the image distorts to a super-massive size. When I rotate it back, it distorts to an even greater size. Essentially, the image becomes unusable.
Questions: Why does this happen? Is there a better way to implement the CSS so this can be avoided? If not, what's the simplest javascript fix to the problem?
Here's the CSS for the image div:
div.pic-container-1
{
width: 100%;
height: 80vh;
background: url(../images/rt2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here are screenshots (iPhone):
Initial load:
Rotate to landscape:
Back to portrait:
Change
height:80vh
to
height:80%