Sticky section background image

Solved

Sticky section background image

girltimebeauty
Tourist
10 0 1

Hello, I want to set a section background image to be fixed/sticky.  So that it does not scroll with the rest of the page - can someone please help me with the CSS for this, thank you

Accepted Solution (1)

gregory109
Visitor
2 1 0

This is an accepted solution.


@girltimebeautymydestinycard wrote:

Hello, I want to set a section background image to be fixed/sticky.  So that it does not scroll with the rest of the page - can someone please help me with the CSS for this, thank you


Hello, @girltimebeautymydestinycard 

 

To make a background image fixed, you can use the background-attachment property in CSS. Here’s a simple example:

 

.section-selector {
background-image: url('path-to-your-image.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}

 

Replace .section-selector with the actual class or ID of your section and 'path-to-your-image.jpg' with the path to your background image. This will make the background image stay in place while the rest of the content scrolls.

 

I hope this information is helpful to you, If you want more help you can tell me I am happy to help you.

 

Best regard,
Gregory Chavez

View solution in original post

Reply 1 (1)

gregory109
Visitor
2 1 0

This is an accepted solution.


@girltimebeautymydestinycard wrote:

Hello, I want to set a section background image to be fixed/sticky.  So that it does not scroll with the rest of the page - can someone please help me with the CSS for this, thank you


Hello, @girltimebeautymydestinycard 

 

To make a background image fixed, you can use the background-attachment property in CSS. Here’s a simple example:

 

.section-selector {
background-image: url('path-to-your-image.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}

 

Replace .section-selector with the actual class or ID of your section and 'path-to-your-image.jpg' with the path to your background image. This will make the background image stay in place while the rest of the content scrolls.

 

I hope this information is helpful to you, If you want more help you can tell me I am happy to help you.

 

Best regard,
Gregory Chavez