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 */
Mike Basic on 05/02/19 at 21:19 Edited in mooSocial templates
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 .
Long Tran 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
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 cool


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 :) 
Mike Basic on 05/05/19 at 14:27 Edited
Cookies on mooCommunity - Social Networking Script.
This site uses cookies to store your information on your computer.