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).
Related
I've noticed a bug on a site I am building. When you zoom in on a mobile phone, then rotate the screen orientation and then zoom out the background shrinks and only returns to the original size when the screen is rotated again. Any idea where I am going wrong?
Here is the CSS I am using:
html {
background: url(images/scroll.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
Cheers
Simply removing fixed prior to using cover resolved this problem.
background: url(images/scroll.jpg) no-repeat center center;
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.
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.
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
I'm not a seasoned web developer and am quickly hacking up something for fun. I have a web page that has an 1024 x 768 background image (I know that's probably a bad idea) that I can correctly centre if the browser width increases. However, when the browser width decreases below 768px, I want the image to be "centered" along with the width rather than just tacking the top left corner so that the centre of the image is always in line with the other elements on the page.
What kind of CSS magic can pull this off?
Here's my CSS:
body
{
background: #000000; /*Black bg for extra space not covered by img*/
font-family: sans-serif;
margin: 0px;
}
.wrap
{
background: url(../images/background.jpg) no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
/*Stretch body all the way to edges*/
/*width: 1024px; /*Min width for site*/
}
Thanks.
follow tutorials for responsive :
http://stephen.io/mediaqueries/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Take a look at this website
The CSS shown here in the "Awesome, Easy, Progressive CSS3 Way" is almost as the code you have. what you need to change to center the image horizontal and vertical is adding "center center" to the background settings:
.wrap{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
Have you tried :
background-size: 100% 100%;
along with all your other css. This will ensure that the background image that you are using will stretch to fit the screen size(height and width-wise)