Zerif lite: Adding image in Page's background

Hello,

We have read your message and someone will answer your question as soon as possible.
Thank you for your patience!

Best regards,
Alexandra

Ok, I have tried several plugins but without luck.
I guess that’s because all my pages are in full width format, it’s overriding the plugin functions.

If you have any recommendations/ plugin that work, I would appreciate it.

It should be easy to customize individual pages with specific background but I don’t seem to find the answer (plugin, css, template-fullwidth.php, …)

Thanks for your help

Please help, I am so close to finish my web but just need this fix on different background for each page.

Many thanks!!

Hi,

You can use:

body {
    background-image: url('IMAGE-URL') !important;
}

using any CSS to Pages plugin. ??

Regards,
Hardeep

Hello Thanks a lot for the reply

Do I have to modify the Full Width Page Page Template (template-fullwidth.php)?
If yes, I guess that I need to copy the template coding in my child folder, correct?
How do I identify each page in the CSS so that I can put a different background for each page with the relevant URL?

Hi,

Every page’s body contains a unique page ID as its class, so that will help you in identify the page. ??

But you can use this plugin instead: https://www.ads-software.com/plugins/wp-add-custom-css/

Regards,
Hardeep

Hi, Hope it’s OK to tag onto this issue? … I have just started using Zerif-Lite (as a child theme). My site is only localhost at present.

I have a few “pages” in addition to the home page and also want to put a different image on each.

I have done as above (with the CSS using “wp-add-custom-css”) but still no image.

Looking at the page via “development tools” I can see that the “body” statement is in the CSS OK, but it seems to be overridden by later options?

I can add the image OK if I put it on a “div” but that doesn’t cover the whole page.

Any suggestions appreciated.
Gordon

Hi,

Unfortunately the theme doesn’t support this customization and as much as I would love to help with some custom code, this is beyond the support offered for the free products, which consist in bug fixing and theme documentation.

Regards,
Alexandra

Hi Alexandra,

Thank you for the reply. I do understand that this is not something you can spend any time on for the free edition, but would it be possible for you to give me a hint to where in the structure of your code I would need to look to make the changes myself?
While I can code, I am just learning this environment and it would save me a whole heap of time if I knew approximately where to look to start with….please?

Best regards,
Gordon

Gordon – did you manage to fix this issue? If so can you share the solution.

I love this theme and I would be prepared to pay for it… but I need it to be multi page! This is why I want to mod the full width template to look similar to the homepage.

Sorry for the delay – I had to go back and refresh my memory!

Well, I did get a common background through the whole website, but I never really got quite what I wanted (different BG on each page) as the theme does only seem to allow one image in it’s “free” version.
However, I compromised as follows, adding these changes to the CSS via the CSS Editor …

1. First I added “MyImage”, to the “Content” section, to be the overall background.

/*---------------------------------------
 **   10.0 Content                   -----
-----------------------------------------*/

/* NOTE - .site-content was just background: #FFF; */
/* Removed single colour background and replace with my image */
.site-content {
	/* background: #FFF; */
        /* background-image: url('https://mywebsite.co.uk/wp-content/uploads/2015/09/Tile-lighter.jpg') !important; */
        background-image: url('https://mywebsite.co.uk/wp-content/uploads/2015/09/MyImage.jpg');
        background-repeat: no-repeat;
        background-position: center;
}

.home .site-content {
	background: none;
}

2. Then I added a new CSS entry to allow me to set a background to any “div” and created the entire useable area with this “div”. This gives a box effect with just a border of the “MyImage” background …

/* NOTE - My additions to CSS for the second-level pages */
.ggdiv {
	background-color: #f3f3f3;
	border-color: #e6f0ff;
	background-image: url("https://mywebsite.co.uk/wp-content/uploads/2015/10/brickwall-soft.png");
	border-style: solid;
	border-width: 10px;
	}

p.ggparad {
	text-align: left;
	color: #000000;
	font-weight: normal;
	}

p.gpparah {
	text-align: left;
	color: #3333dd;
	font-weight: bold;
	}

And finally, created the required PAGE, using TEXT mode to allow me to wrap the whole thing with my “div” …

<div class="ggdiv">
 ... page content ...
</div>

~~~~~~~~~

AND, Not specifically part of this conversation, but I also removed the darkening filter from the Contacts page so that the background image was the same throughout…

.contact-us {
/* NOTE - was background: rgba(0, 0, 0, 0.5); */
	background: rgba(0, 0, 0, 0);
	padding-bottom: 95px;
}

I hope this is useful?
Gordon