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.
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 am using a background size cover for an image I want to display in my homepage full screen when you enter the site.
.image1{
background: url(../img/nike.jpg) no-repeat center center;
width: 100%;
padding: 20px 10px 60px 10px;
height: 100vh;
overflow: hidden;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
However, since the image is really wide, I want it to be all in the screen when you enter the site with a phone. That´s why I have used the following media query:
#media (max-width:600px) {
.image1{
width:70%;
background-size: contain;
}
}
That is working and now you can still see the full image in mobile screens. But obviously it is not filling all the background. It has white space above and below it. So what I want is the text and logo I am going to put to appear in the white space above the image, and not in small size inside the image. I don´t know how to do this since the text and content I am placing is originally inside the div with this image as a background.
The only solution I can think about is to set the margin-top in the media query to -200px but I don´t think this is a very good practice.
You can see the site live in www.text.hdeprada.com It is a simple page with just this issue I am trying to fix.
use backstretch js , it will resolve your problem. Its easy and reliable.
Try scaling the image inside the div with this
background-size:200%;
scale the % to fit your need
I created a background image for my website in photoshop and i want it to apply on my webpage as it look like in photoshop.
How can i use the created image for my website background without using repeat property in css. I want this background to fill the screen without losing any effects/gradients and works with every resolution.
Can i do it without exporting image in full resolution of screen? Or any other alternative way. Or i need to do it with exporting in full resolution of screen.
To create full screen image use css:
html {
background: #e7e9ef url('image.jpg') no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
Your image not have to be full image screen resolution - it will be stretched but of course to achieve decent effect you should rather use quite big image - I used 1920px x 1285px but of course it need to be compressed as much as possible.
You should also consider what happened if user visit website using mobile devices. Big images takes a lot of transfer so you should also consider preparing smaller images and use media queries to give such user smaller image.
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%