How can i add a background image to body background ?

Hi,

I try to put 2 differents image background.

One for landing page and one other for connected people.

The first one for landing page is ok, it's work, but the second dont show :/

I am not sure of the syntax in css for the second, specialy first ligne, can someone tell me if what I put in the custom.css is correct please?

/* Page Background landing page */
#page_guest_users-member_login #content-wrapper.container, #page_guest_home-index .container#content-wrapper {
width: 100%; !important;
padding: 0; !important;
margin: 0; !important;
background: url('/theme/Tradition/img/red.jpg');
}
/* end */

/*Page Background*/
body:not(#page_guest_home-index) {
background: url('/theme/alsace/img/bois.jpg'); !important;
}
/* end */

Basic on 05/02/19 at 21:19 Edited in mooSocial templates

Add comment comment

2 Answer(s)

Hi , It seems your css not correct , you can use simple way to add css :

- Your landing page bg image : body##page_guest_home-index

- Other page : body .

This will make your landing page is top priority . If can , please use bg image for both , background gradient is not good in some case .

Basic on 05/05/19 at 21:56

Mike Basic

Thank you @Long Tran, will test this when I go home and I will follow your advice for both backgrounds

on 05/06/19 at 05:38

Add comment comment

Ok finaly i find a solution, i use one image in css for landing page and a other one in png for connected people.
Thank's @ketkew who put me of the way of CSS Background Patterns

The code i use is this

body.default-body
{
padding-top: 125px;
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/purty-wood.png");
}

/* page d'accueil invite - Landing page*/
#page_guest_users-member_login #content-wrapper.container, #page_guest_home-index .container#content-wrapper {
width: 100%; !important;
padding: 0; !important;
margin: 0; !important;
/* fond carreau rouge page d'accueil invite */
background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 20px 20px;
}
/* end */

It's not optimal because it shows both on landing page, but it works for now.

But I would still like the exact css code to be able to put an image in landing and another in not landing if possible :)

Basic on 05/05/19 at 14:27 Edited

Add comment comment

Top Q&A Contributors

Highest Viewed Questions

How can i add a background image to body background ?