- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.
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/
Brilliant thank you very much!!!
Yeah the stack order is a bit counter intuitive, I remember it like this: first one is closest to the user.