The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Background image too wide

  • # March 26, 2013 at 7:46 am

    Can anyone tellme how I can change the css forthe background image on my site:

    body#page {
    background: #bbe1ed url(../../images/background/landscape/landscape_img.jpg) 50% 100% repeat-x;
    background: url(../../images/background/landscape/landscape_clouds.png) 50% 0 no-repeat,
    url(../../images/background/landscape/landscape_img.jpg) 50% 100% repeat-x,
    url(../../images/background/landscape/linear_gradient.svg) 50% 0 no-repeat;background-size: 2000px 1450px, 2482px 435px, 100% 100%;
    The background image of the landscape at the bottom of the page stretches and appears pixelated.

    # March 26, 2013 at 8:06 am

    Why are there clounds on the ground? :)

    If it’s the landscape image you are referring to then you have set the `background-size` to something larger than the actual image size.

    The landscape image is 1800×322 but it’s set to 2482×435 in your CSS so it scales up and gets pixelated.

    # March 26, 2013 at 8:32 am

    I think I’ve figured out why the clouds are on the ground.

    The bg images are selected in the wrong order.

    It should be…


    I think that’s right.

    # March 26, 2013 at 8:56 am

    Brilliant thank you very much!!!

    # March 26, 2013 at 9:03 am

    Yeah the stack order is a bit counter intuitive, I remember it like this: first one is closest to the user.

Viewing 5 posts - 1 through 5 (of 5 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