Setup Background for the entire website

[DoozK7]

Hello ! Im using X with icon stack (for now) and I would like to know how to apply a Background image (or a gradient background) that cover all the website, on every pages, for the whole screen (no matter what screen it is … )
it should be simple but I feel like Ive missed something …
When I apply a background to a section in cornerstone I still have white bars on the right and left and behind the navbar, I just want all this white disappear …

Im looking for something like that, with the scrolling effect : https://www.ritualcasting.com/ : 1background (slowly moving) and everything on it transparent …

If you could point me the right direction to start
Thanks

[DoozK7]

Ok ! I figured out how to apply a full background.

So, I have 2 issues now :
1st, the background stop just a the top of the footer … is it possible to force him to go on the footer ?
and 2nd, Im still trying to understand how the scrolling effect work ? and how Can I apply it on the website ( https://3dsystem-info.fr/ ) Any help for that would be very appreciate

(sorry for my bad english … )

Thanks in advance

[DoozK7]

Now I also found a solution for the footer, and all is working pretty well, but i don’t know how to set the background to move while scrolling …
Any help is welcome (I already read the posts on the forum … nothing really helpfull in my case)

Thx

[ruenel]

Hello Samy,

Thanks for writing in!

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

I have check your site and as I found out, you have added this custom css:

.page .site {
    background-image: url(https://3dsystem-info.fr/wp-content/uploads/2020/04/background-color-black-metalfilter.png) !important;
    background-attachment: fixed !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

This code will apply the background image to the body of the page. If you want to add a background image in some section of your page so that as you scroll it, the background images of those sections will display. You can always insert a background image in each of you section. Simply find the Background Options in the section element settings.

If you want to learn mode about the section and background of the section, please check this out: https://theme.co/docs/creating-layouts#sections

If you don’t see some of style options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

Regards.

[DoozK7]

Hello sir, and thanks for aswering.

But like I said in the first post, when I apply a background on a section, it doesn’t fill the body, and it makes sense because the section is smaller than the body, I don’t know why but it’s like that …

That is why I added a piece of additionnal CSS, it’s the only way i found to fill the whole page, if you have a better method …

And for the moving background effect during scroll, i don’t understand how it work, apparently it can work with javascript, but im very unfamiliar with that.!

[friech]

Hi Sir Samy,

You can set a site-wide body Background Image under Theme Options > Layout and Design, but it seems your custom CSS works just fine now, you can leave it be.

Regarding the scrolling effect, that is called the background-parallax effect. That is where the Section’s background comes in, when you apply a background-image on your section, you can also apply a parallax effect on it.

• 
  
  
  

Hope it helps,
Cheers!

[DoozK7]

Hello, the parallax effect doesn’t work on the site background … because it only affect a section background, and if i set a background in a section, it doesn’t fill the entire page …

Now, i would also like to change the text color on an icon list, because it’s grey by default and there is no option to change the color, and it’s not easy to read in my case … can you help me with that ?

Thanks

[ruenel]

Hello Samy,

Regretfully the parallax is only a feature in the section background. There isn’t any settings in the theme that you can apply it to the body of the entire page. Your custom css code where you have added background-attachment: fixed !important; should mimic a parallax like effect.

Meanwhile, if you want to change the text color of the list icon element, you can simply add “color: white;” in the style field. See the image below:

• 

We would love to know if this has worked for you. Thank you.

[DoozK7]

yes, the parallax work, but the size of the sections is weird, i have to reduce the margin a lot to get it bigger, and thats create some glitch … the result its not ok ^^ Im gonna leave this parallax i think, disapointed for a 50$ theme but …

And for the icon’s color yes it work, perfect

[friech]

Hi Samy,

Please make sure you’re using a Blank - No Container, Header | Footer template on your page so the section can be full-width.

This is a section background-image, and the effect you see here is called parallax.

• 
  
  
  

Currently, you can not do this on your homepage because you put everything on one section it will cover your entire page. Notice on that example site, the parallax effect is only applied to that specific section, that is how you get that effect.

If the native parallax effect option is not enough, please apply the background-attachment: fixed !important; on your section.

Here’s a proper selector that you can use on your Section’s Element CSS area

$el .x-bg .x-bg-layer-lower-image {
  background-attachment: fixed !important;
}

Hope that shed some lights,
Cheers!