how to add background image in CmSimple template dropdown2024_logoright2cols

[valmin]

Hi,

Im using the template dropdown2024_logoright2cols from Gert and I would like to have a background picture on the whole page.
I have tried to add the code

background-image: url('images/bg-main.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;

to the body { }in the CSS file but with no luck...

I hope someone can help me

Br Valmin

[Gert]

I would like to have a background picture on the whole page.

That's not so easy, because this is not the idea of this template, it is not made for this.

There are a lot of other areas laying over the body, so the background image of the body is not visible. And you should not use body{}, but the css class .body{} to insert the background image, otherwise you will be surprised by the editor:

Code: Select all

/* BODY UND SEITE / BODY AND PAGE */
body {background: #fff; color: #345; font-family: Poppins, arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4em; text-align: left;}
.body {
background-image: url('images/bg-main.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
#top {font-size: 0; line-height: 0;} 

Then search in the stylesheet.css for .tplge_outerContainer, remove the background definition or remove the 2 ones completely, and look what happens.

After that, you can look for other div areas you wish to make transparent, simply remove the background definitions for them,

Gert

PS: Or make them all transparent with 1 line at bottom of stylesheet.css:

Code: Select all

header, .tplge_outerContainer, .tplge_headerimage, .tplge_content, .tplge_sidebarNav {background: none!important;}

After all, it's quite simple anyway