Add a background image to a blog page

Site URL: https://www.universinteriora.com/

Hi guys,

I know you've been asked that question many times but the answer is never quite the same... And I've tried all of them without success. ^^

I would like to change the background image on the blog page and all the related blog posts of this website :
www.universinteriora.com
password: U_I2022
Name of the blog page: Gazette

Do you think you can help me?
Let me know if you need more infos.

Thank you!

Try adding to Design > Custom CSS

/* Site background image */
body[class*="collection-tye-blog"] {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

Hi,

Thank you for your help and sorry for the late reply!
Unfortunately, it's not working... Nothing happens.
Do you have another idea?
Let me know if I can help you in any ways.

Cheers,

On 2/9/2022 at 9:18 PM, AudreyC said:

Hi,

Thank you for your help and sorry for the late reply!
Unfortunately, it's not working... Nothing happens.
Do you have another idea?
Let me know if I can help you in any ways.

Cheers,

Ah, I Have a typo in the code.

Use this new code

/* Site background image */
body[class*="collection-type-blog"] {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

Hi @taunphan Could you help me with how to set an image as a background across the whole site. Did this for my blog pages and it looks/working great but can't figure out how to do it across the whole site. Thanks In Advance 🙂

On 2/16/2022 at 6:45 PM, amyleehayward said:

Hi @taunphan Could you help me with how to set an image as a background across the whole site. Did this for my blog pages and it looks/working great but can't figure out how to do it across the whole site. Thanks In Advance 🙂

 

Use this code

/* Site background image */
body {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

Sorry for the late reply!
Thank you!! It's working 🙂

I'm having some troubles with the size of the background image - right now the image is all stretched and pixelated.
Is there a way to not extend background image despite the lenght of the blog ?
And last question: is it possible to keep footer's background visible? 

Thanks again!
You're the best 😄

On 3/7/2022 at 9:23 PM, AudreyC said:

Sorry for the late reply!
Thank you!! It's working 🙂

I'm having some troubles with the size of the background image - right now the image is all stretched and pixelated.
Is there a way to not extend background image despite the lenght of the blog ?
And last question: is it possible to keep footer's background visible? 

Thanks again!
You're the best 😄

#1. change background-size: cover; to background-size: contain;

#2. Add this CSS under

footer.sections .section-background {
    background-color: #030e30 !important;
}