I have a background image with resolution 1900x1200,and the background is showing just fine on most resolutions but when i get down to mobile resolutions i have got a problem.The background is streched out and it is very ugly.In my mobile version of website there is a lot of height(on android s4 i have almost 3000px in height),now my question is how can i make my background look better on mobile phones?
Here is my current css code for background.I know i have to add some new code in media query just for the specific phone resolution,but i dont know what...any help or explanation?
body {
background: url(mypicture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the same body declarations under a new media query defining screen size constraints and preferably pull a new image - mypicture-mobile.jpg that has been resized keeping in mind mobile displays.
Try
#media only screen and (max-width : 480px) { /*change 480 to targeted device width */
body {
background: url(mypicture-mobile.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%; /* set to 100% instead of cover to fit screen */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
}
A little playing around will reveal your solution, give it a shot
Hope this helps.
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 am pretty new to this front-end stuff. I have an image 1200 * 900 px which i am using as a background for my banner. The image seems good on larger screens but when I switch to Apple iPhone 6S from responsive design mode. The background gets cutt off from sides. How do I retain complete image while still on smaller sizes.
index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
<h1>TThis is a banner image.</h1>
<p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
</div><!--/.col-->
</div>
</div>
style.css
.banner {
background: url(banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 680px;
position: relative;
}
Some solutions i have tried say to set max-width: 100% on smaller screen size using media queries
#media (max-width: 768px) {
.banner{ max-width: 100%; }
}
But this solution doesn't work. What are my other options to scale this background with screen sizes ?
If you want to display the full picture you should use contain instead of cover.
And if you want to keep cover for larger screens you can change the cover to contain only in your queries.
#media (max-width: 768px) {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
I am trying to make a background image of the particles JS responsible. Thus I used this code:
#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
but when I resize my browser I get this result:
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?
See if this helps: http://codepen.io/panchroma/pen/ggMYBQ
The key detail is to apply the background image to an element that covers the full height of the screen, eg html
CSS
html{
background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm using a fixed background cover for my website here: http://www.datisdesign.com
Every page has a big header image, but in small devices such as mobiles, the cover image becomes so large. I want to make it smaller in mobile devices.
This the code that I'm using:
#takelessons {
background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center top;
}
I solved my problem by limiting the capability to the large tablet screen size.
#media screen and (max-width: 992px) {
#parallax {
background-attachment: scroll;
}
}
Here you go :)
Add the below to your style...
background-size:100%;
width:100%;
I hope this helps
Try this one out
background: url(image.format) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I found that if background-size: cover is used with background-attachment: fixed it causes this issue on mobile.
Changing from 'fixed' to 'scroll' fixes it.
In my case I used Javascript for my parallax effect so I was able to update the equation to account for the different background behavior.
I have a mobile page with full screen background image.
I have one image for portrait and one for landscape. My mission is to keep image height full screen while cropping the sides to fit screen and keep aspect ratio.
I tried this css tricks post :
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;
}
While working great (as I needed) on portrait, it doesn't meet my needs on landscape:
It keeps the image full screen width and crops it from the top and bottom (My requirement from the designers is keep full screen height and crop the sides).
There are a lot of examples on the internet for keeping image's ratio etc. (for example ), but I could find a solution for my situation...
Thanks!
Yaniv
This managed to work for me, this is based on the image being a large enough size to cover large screen sizes...
html {
background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
Jsfiddle here