Welcome! To use this support forum, please Login or Join Today!

   

Two backgrounds - left and right aligned

{name}
Rank

Total Posts: 4

Joined 2011-05-09

PM

 

I’d like to add two backgrounds to Onyx.  One would be a left-align PNG and would be shaded horizontally from colour to transparent.  The other would be righted align and shaded from transparent to colour.

That way not matter what the page width it would look like there;s an image spanning the entire width.  Please have a look at the attachment to see what i mean

And better still perhaps there’s three background images - one with a textture that goes across the whole page and on top the left and right align images with a transparancy gradient.

Any suggestions wwelcome.

thanks, Simon

Image Attachments

honeycomb1.png

Click thumbnail to see full-size image

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I’m not sure if you mean the header, content area, footer, or what. For the content area, you would overwrite ./images/styleX/main_bg.png (depending on your default style) and change the CSS in styleX.css to repeat on the Y axis.


Change:
(Appearance → Editor → styleX.css)

#container {
 min-height: 300px;
 background: url(./images/styleX/main_bg.png) no-repeat center top;
 padding: 12px 0 12px 0;
}

to:

#container {
 min-height: 300px;
 background: url(./images/styleX/main_bg.png) repeat-y center top;
 padding: 12px 0 12px 0;
}

Keep in mind the image would have to be 960px wide in the clear area. You may want to just apply the background to the body tag which comes right before the #container rule in the CSS.