Grow your CSS skills. Land your dream job.

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:

    http://tinyurl.com/cj4ft8x

    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…

    landscape
    clouds
    gradient

    I think that’s right.

    http://css-tricks.com/stacking-order-of-multiple-backgrounds/

    # 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.

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