Get a free trial // 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;

    /* 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed