How to make background-images editable?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
Lkw

How to make background-images editable?

Post 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.
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm

Re: How to make background-images editable?

Post 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
Lkw

Re: How to make background-images editable?

Post 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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How to make background-images editable?

Post 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...
Locked

Return to “Layout and Design (CSS & HTML)”