Page 1 of 1

How to make background-images editable?

Posted: Mon Apr 14, 2008 6:25 pm
by Lkw
First of all, I love CMS Made Simple, it's very useful software! I'm transferring a website into it and it works very well. But I wonder whether it's possible to make a background-image editable.

In the CSS I have this code:

Code: Select all

#container h2.contact {
	float: right;
	width: 541px;
	height: 575px;
background: url(uploads/images/bg_contact.png);
}
I deleted the last line background: url(uploads/images/bg_contact.png); and put it into the template:

Code: Select all

<div id="container">
<h2 class="contact" style="background: url(uploads/images/bg_contact.png);"></h2>
</div>
Now I like to make the image editable (in a global content block?). But of course that won't work, because when I add a picture using the WYSIWYG, this will be the code:

Code: Select all

<img src="uploads/images/bg_contact.png">
And that's not a part of the style-description for the background-image in the template.

QUESTION: Is there any way to make background-images editable other than just 'upload and overwrite' using the imagemanager?

Thanks in advance.

Re: How to make background-images editable?

Posted: Mon Apr 14, 2008 6:43 pm
by Nullig
Can you create a GCB called "bg_image" with just:

Code: Select all


bg_contact.png

Then in your code use:

Code: Select all


<h2 class="contact" style="background: url(uploads/images/{global_content name='bg_image'});"></h2>

Nullig

Re: How to make background-images editable?

Posted: Mon Apr 14, 2008 6:56 pm
by Lkw
Well, that's not a bad idea. I'm trying to make the website editable for people who don't understand anything about HTML and CSS, so I'm looking for the most intuitive way to build it in CMS MS for them.

Now, using your method they just have to upload a new file by the image manager and then simply change the name in the GCB-block. No paths. Not a bad idea indeed. Thnx.

Re: How to make background-images editable?

Posted: Wed Apr 16, 2008 1:23 am
by Dr.CSS
If you put the class in the style sheet and mark the style sheet Media type: screen it will show up in the style drop down then when they edit a page and make a h2 they can hilite it and give it the style/class of contact and the CSS will take care of the rest...