CMS Made Simple Forums

Posted: **Tue Oct 22, 2013 1:35 pm**

Hi there,

Sorry if this is really easy but I need to give my client the ability the option to change their page background and can't seem to get my head round it.

I plan to use the {content_image} tag and have already changed the path in Global Settings to point to a folder I've created for the background images.

{content_image block=background_image' label='Change your page background'}

So far so good.

The problem lies in trying to assign the background image into the page template. I need to tell the template that the image is a background image for the page but not sure what command / code to use.

I've tried placing the {content_image} tag inside a div and using CSS to absolute position it with 100% width etc but I need the image to repeat so that it covers the entire background area. Ideally I would like to add the {content_image} tag into the CSS and code it as a background image that way - is this possible?

The background doesn't have to be page specific which also makes me wonder if there is maybe a way of utilizing a Global Content Block although this would mean the client having to type in an image url into the block when they wanted to change the background rather than simply going to Page edit and selecting a new image from a drop down box using the {content_image} tag.

Any help would be appreciated and "You're an idiot, this is really easy and this is how you do it" posts are also acceptable!!!!!

Posted: **Tue Oct 22, 2013 2:37 pm**

It is usually said that there are many ways to skin a cat with CMSMS...

True, so I'll just suggest one possible way of doing it:
Dowload CustomGS: http://dev.cmsmadesimple.org/projects/customgs
you can then use a tag on your CSS in the body element. Remember two things though:
- Smarty tags in css are called like this: [[mysmartytag]] or [[$mysmartyvar]];
- CSS is cached with the template so whenever someone changes the background image they'll also need to clear the cache;

There are other ways and probably someone will come up with a different idea, but this is how I'd try to implement it

Posted: **Tue Oct 22, 2013 2:43 pm**

{content_image} returns an image for a specific page. it cannot be placed into the css. because the css is a: generated once, and cached. b: used for multiple pages.

You can however, use it in different ways in your template. something like this could work:... you will have to fiddle with it though.

<div style="background-image: {content_image block='foo' label='bar' urlonly=1};">

Posted: **Tue Oct 22, 2013 7:44 pm**

Perhaps you will find (some) relevant info here:
https://www.cmscanbesimple.org/blog/ass ... e-per-page

Posted: **Wed Oct 23, 2013 8:29 am**

Thanks for the reply everyone.

I'm still wrestling with the code and trying to make everything work but I think I'm making progress.

Jo - thanks for the suggestion but the client is using CMSMS version 1.9.4.2 so the plugin isn't compatible. I would upgrade the system but I didn't build this site and there's a lot of bespoke stuff going on which might break.

Calguy - Playing about with different versions of the <div style> but haven't got this way too work.

Rolf - Funnily enough I read your article before posting this on the forums. Really great article - thanks. All your methods work like a charm but I can't seem to get the background positioning working - the image is simply posted into the div whereas I need the image to act as a background so that I can repeat it and z-index it to the back of the page etc.

Thanks again for any further suggestions - I really appreciate everyone taking the time to help.

Posted: **Wed Oct 23, 2013 9:42 am**

Try <body style="background-image: {content_image block='foo' label='bar' urlonly=1};">

Posted: **Thu Oct 24, 2013 9:30 am**

Thanks Rolf,

I don't know what way the guy has coded the site but the {content_image} just won't work.

I've implemented the code you gave me and if I look at the page source of the live page it is outputting the background image command into the body with the correct url etc but the image just won't display.

I think there seems to be a clash of styling somewhere and it's cancelling out </__body style="background-image: {content_image block='foo' label='bar' urlonly=1};">

I think I will have to spend some time going through the template and css code and see what's happening. For your info the url of the site is http://www.holywood-trust.org.uk/

Maybe you can see something I can't!!!

Thanks for all your assistance anyway.

Posted: **Thu Oct 24, 2013 11:50 am**

First: I don't see the style in the body tag looking at the code of that homepage.

Second: syntax error in your code. http://www.w3schools.com/cssref/pr_background-image.asp

Code: Select all

</__body style="background-image: url('{content_image block='foo' label='bar' urlonly=1}');">

Third: install Firefox and Firebug (there are other options) and learn how to use it. It will save you a lot of time in the future.

CMS Made Simple Forums

Using the {content_image} tag to change background img

Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img

Re: Using the {content_image} tag to change background img