Home Page Background Image for York Family

Hi, is there a way to add a background image to York template home page?

example below:

https://www.papercityfabrics.com/shop

Thanks!

Background Image for Main Content only or main content + header + footer?

Hi @tuanphan  for main content only please. 

On 4/23/2024 at 10:46 PM, S_R_HRTWL said:

Hi @tuanphan  for main content only please. 

I forgot, can you share link to your site?

@tuanphan sure. Thank you.

https://www.road-from-damascus.co.uk

On 4/25/2024 at 5:59 PM, S_R_HRTWL said:

@tuanphan sure. Thank you.

https://www.road-from-damascus.co.uk

You can use this code to Website > Website Tools > Custom CSS. Replace Pixabay with your image url.

body.homepage .overflow-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/26/17/32/woman-8277925_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Is it possible to apply it to all pages? It works perfectly on home page thank you @tuanphan

On 4/27/2024 at 7:44 PM, S_R_HRTWL said:

Is it possible to apply it to all pages? It works perfectly on home page thank you @tuanphan

You can use this code

body .overflow-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/26/17/32/woman-8277925_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Awesome!! Thanks! @tuanphan

I noticed the background is zoomed in quite a lot on mobile view when not on home page. is it possible to set it to the same zoomed out size for the whole website on mobile view please?

Add this code under

@media screen and (max-width:767px) {
body .overflow-wrapper {
    background-repeat: repeat-x !important;
    background-size: unset !important;
}
}

I did it and this was the result unfortunately @tuanphan

You can remove line

  background-size: unset !important;

Thank you!