Grow your CSS skills. Land your dream job.

HTML Background Image

  • # April 29, 2013 at 1:53 am

    I’ve followed the discussions for placing the perfect background image using the html method:

    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;
    }

    I don’t want this image to download or display on cell phones, smaller media. I’ve tried placing a display none on the image and it’s not working. Any suggestions?

    # April 29, 2013 at 3:29 am
    html {
    background:white none no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    }

    /* Suppose that a cell phone has 360px screen width */
    @media (min-width:361px) {
    html {background-image:url('img/bg.png')}
    }
    # April 29, 2013 at 10:09 am

    Thanks, this works great!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".