How to use CSS media query to scale background-image to viewing window


Tags: css,mobile,mobile-safari,background-image,media-queries

Problem :

I have this large image as a background for a website:

body {
    background: #000 url(/assets/img/living.jpg) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

But on my mobile device (iPhone 4S - Safari), the background-attachment: fixed does't seem to be having the same effect as it would on a desktop. Why is that and can I use a media query to fix that?



Solution :

Try this - you shouldn't need height:100% or even necessarily need a media query to handle the background image. The CSS3 background-size:cover property handles that pretty well on its own. Works well for me on all mobile devices I've tested - especially well on Android, mobile version browsers and all tablets.

body {
    background-color: #000; 
    background-image: url(/assets/img/living.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}   

    CSS Howto..

    How to center HTML content

    how to use liveview in dreamweaver cs5 and local xampp server

    How to change .css priority with javascript

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How do I make :hover inside div style? [duplicate]

    First and Second touch of a button, how to show images at different times?

    How to style Select2 input tags with css and how to limit them

    How to use media queries in an effective way? [closed]

    SVG + CSS - how to include in HTML and scale & color?

    How can I use a CSS selector to match two classes being present?

    how to do CSS for below image box (not a shadow box) [duplicate]

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    How can i Split Menu Bar in two lines

    How can I style html/form elements using CSS?

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to let css selector exclude an element?

    How to make CSS input range thumb not appear at first

    How to change font-size of a tag using inline css?

    How to change scrollbar position from bottom to top of the element?

    How can i place a child div on a fixed position of a parent div that when i change place of parent then child should move automatically?

    How to override global style for img tag in css

    How to gracefully override the old css with a new css by jQuery?

    How to stop this parent element from being affected on hover?

    How to add border between td's in which are in different tr's?

    How do I stop and change a CSS keyframe in Javascript?

    How to flow text from a box to another with CSS

    how to middle vertical-align using bootstrap input-group

    How do I overwrite certain conditions when you have two CSS files?

    How to set ul width in percent?

    How to use CSS to create an image overlay effect?