CODEWITHSUNDEEP
htmlcss
Fox Glove
Fox Glove

Reputation: 11

How to fluidly scroll a background image with CSS

So I have a background image that is a bit taller and wider than normal browsers. I'd like to be able to have it so that it scrolls it proportionately to the size of the screen. Since it is longer than normal, i'd also like it to scroll down gradually as the user scrolls down the page until the user reaches the bottom.

To put it simply, I think Let's assume the side height is 1000px, and my image is 1500, i'd like the top to start a the page and be sized so it fits the user's screen, however the bottom 500 i'd like to have scroll at half the speed so as the user scrolls down it slowly scrolls till it reaches the bottom.

I'll find a simpler website later, this conept is hard to put into words and google. If anyone understands, please help!

I need to use css or something

Upvotes: 1

Views: 462

Answers (1)

Mee
Mee

Reputation: 158

2 Things you should make before posting.

  1. Show some code / attempts
  2. Inspect your sources.

As far as I could see on the website you have provided, they are using simple one image which is 400px x 400px and the other which is 53px x 54px and it repeats both ways (height and width).

This is the background image:


(source: geek.nz)

On the back of that PNG image is the following image:

It is a GIF image.

They use the following on their CSS, which you should have had a go on it!

#ground {
background-image: url(bg-green.gif);
background-repeat: repeat;
background-attachment: fixed;
}

#clouds {
background-image: url(clouds.png);
background-repeat: repeat;
background-attachment: fixed;
padding: 5em 0;
}

Is that what you are looking for?

Upvotes: 1

Related Questions