how to set dynamic background with TVs

38 Posts

k_insuwai Reply #1, 17 years, 8 months ago

I have a TVs - contentbg, to specify background image for each document.
All documents have their own background image but only one template.
How can I do this?

Please advise.

241 Posts

bob1000 Reply #2, 17 years, 8 months ago

One way to do this is create a TV (e.g. bgImage) with a list of image names using the "DropDown List Menu" input type.

In the template, add an ID attribute to the body tag that references the TV.

<body id="[*bgImage*]">

Assign a background image to each document.

In your CSS file, create a rule for each background image.

body#image1 {
	color: #fff;
	background: #000 url(images/image1.jpg) no-repeat center top;
	}

If you have a lot of documents therefore lots of background images, your CSS file could end up too large so you’d be better off creating a snippet.

388 Posts

Terry Reply #3, 17 years, 8 months ago

How about this?

Insert this in the head directly (or in a chunk)

<style>
body {background-image: url(../../[*background*]); }
</style>

Create a TV with image widget. Then for each document select/navigate to the desired image in the image folder.

I realize the style should be in a separate css file rather than in the head directly. . .

www.terrybarthdesign.com