Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background image too wide

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43670
    matthisco
    Participant

    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.

    #129744
    Paulie_D
    Member

    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.

    #129747
    Paulie_D
    Member

    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.

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

    #129750
    matthisco
    Participant

    Brilliant thank you very much!!!

    #129752
    CrocoDillon
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.