Adding a background to text entered via Define Pages Editor

[Edessa]

First of all, I’m really sorry if I’ve placed this is the wrong place.

Ok.. I'm not really sure how I can explain this properly, so please tell me if you would like me to explain it in a different manner.

I guess what I want to be able to do is add a background to the data entered through the define pages editor. For example, I want the main page to first show a swf banner (which I've already done). This already has a red border with a curved background. Then I have the welcome message, which I want to add a background to (a rectangle with curved edges)

I think it may be possible to use div's. Since I may choose to change the length of the content, I want the size of the background to change. I thought I could split the image up into three parts. The first would have the top part of the image with the top two curved corners, the next div will be placed below with a background on repeat, and the last will have an image with the bottom two corners.

It’s rather long winded and tedious, but I was curious if someone could explain how exactly I would go about coding this.

I’ve tried:

In the define pages editor:
<div class="MainText">text</div>

and in the css styleshet I have:
.divMainText { background-color: transparent;background-image: url("../images/Main/Text.gif");background-repeat:repeat-x; }

And:

In the define pages editor:
<div id =”MainText”> </div>

And then in the css I have
#Main Text {
Background-colour: transparent
Background-image: url(.../images/Main/Text.gif)
Background-repeat: repeat-x
}

But both don’t seem to work

Any help would be appreciated.

[schoolboy]

Problem could be your CODE SYNTAX... the PROCEDURE seems logical.

[gjh42]

CSS is very strict about spelling and capitalization. If you have a div with class or id of ”MainText”, you need to style in the stylesheet
.MainText {}
or
#MainText {}
respectively.

The common practice for CSS selector names is to use "camel caps", which means lowercase beginning with words in the middle capitalized: "mainText"
This is just a convention and you don't have to follow it.

[coffee23]

Hi,

Hope nobody minds me jumping on this thread...

I would like to add a different background image to each page (eg. Shipping, Privacy, Terms and so on), however i only want to add it behind the text that you edit on the "Define Pages Editor" and so that it only shows behind the text i have put.

However at the moment all i am doing is changing is the background for the whole page (eg. when i click on shipping it shows the backgroung image around the page but not under the text i have edited.

Any advice would be greatly received.

[stevesh]

Easiest way would be in the stylesheet:

#shippingInfoMainContent {background-image: url(../images/your_image.jpg);

You'll need to use Web Developer to see what the id name is for the other pages.

And yes, it's usually better to start your own thread, rather than adding a new question to an existing one.

[coffee23]

Easiest way would be in the stylesheet:

#shippingInfoMainContent {background-image: url(../images/your_image.jpg);

You'll need to use Web Developer to see what the id name is for the other pages.

And yes, it's usually better to start your own thread, rather than adding a new question to an existing one.

Thanks & sorry.