How to make main scroll but not the side of the page


#1

making a website for an assignment for school (first year in software dev) but I want my main(the white area) the scroll but not the gray at the side. bec I want to put a background img there but i don’t what that to scroll to.

thanks


#2

Can you clarify? The gray looks like a plain background, so you would not see if it scrolls or not. Was you intending on adding a background image to it, or did you mean something other than the light gray background behind the main?


#3

ya ill be adding a background but i dont want it to stretch as i add more content so i want it to be fixed in a way? when i scroll i only want the gallary main to scroll

eg https://www.liverpoolfc.com/

look how to bg img is fixed but the main scrolls


#4

If you are looking to emulate another site it’s easy enough to see how they did it using your browser’s Inspect tools.


#5

Note that the image used in that example is just a very large image that fades out to black at the sides and the bottom. This means that on tall and wide screens like my imac the image fades to black at the sides and bottom and therefore does not just appear to stop.

They could have used background-size:cover instead but that has issues on mobile.

To minimise the file size for this massive image they have blanked out the middle of the image with a white background that matches the real layout max-width to cut the file size down by over half.

This is a screenshot of the image they use.

As Sam showed above all they do is place it a background image on the body used background-attachment:fixed.


#6

sry for the late reply thanks ill try that


#7

sry for the late reply thanks that makes sense


#8

yes got it to work thanks lads