how to change/add background image

[Pippo3000]

alright, possibly a quick one for some of you here but I looked for 30mins w/o success. I know I once saw a posting but after the forum upgrade here it must have gotten lost.

 

issue: I have a customized pretty clean = white theme. white background and white shop with some graphic elements.

 

now I want to add a custom (seasonal) background which is

 

a) either a vertical image alongside the left border of the browser window and thus still 'outside' the original shop (if you can follow me). Maybe the attached png helps, not sure though :-).

 

so, either an image alongside the left side of the whole browser window, the shop content itself can then stay 'transparent' which it actually is right now. So the white background is shine through.

 

b ) the other possibility is to add a background image which stretches over the whole screen, from left to right. But then I have to make sure that the shop itself is not transparent anymore as nobody could read anything if there is some weird background across the screen. so here I needed to change the shop backround (and not the background background) from transparent to actually white.

 

any help how to do a) and possibly b )?

 

I found a reference to a <background img> in the code but the few instances I found were not clear to me and rather referring to the category background or header background. I need the background background :-)

 

thanks

[Pippo3000]

alright,adding the image itself I figured out. just replace the background-color line at the topof the global.css in your themes folder to this

 

body {
background: url(../img/background.jpg) no-repeat;

 

but... the shop itself (header,home etc) is still transparent. any idea how to make them solid white so the background image does not show through?

[ukmacnut]

I was making some changes like this on a website I am working on.

 

Try adding some texture or image for the background background with this in your global.css (inside your theme folder):

body {
background:  url(../img/anyimage.png) repeat;
}

 

Then in your global.css see if you have a content class like my theme does and enter a background colour (such as white) here:

#content {width: 890px; float:left; background-color: white; margin: 2em;
padding: 2em; border-radius:25px;
}

 

That should separate the two backgrounds (hopefully )

[Pippo3000]

thanks. the background background already works. now will try the content class background.

[Pippo3000]

hm. cannot see this content class in my theme's global.css. instead I can see some reference to transparent colors, e.g. in global table style

 

 

/* global table style */
div.table_block {
padding-bottom: 6px;
margin: 0 auto 2em;
width: 100%
}
table.std {
border-spacing: 0;
border-collapse: collapse;
width: 100%
}
table.std td, table.std th { padding: 0.4em 0.5em }
table.std th { white-space: nowrap }
table.std tr.item td, table.std tr.item th { background-color: white }
table.std tr.alternate_item td,
table.std tr.alternate_item th { background-color: #f1f2f4 }
table.std tbody tr td, table.std tfoot tr td { border-top: 1px solid #bdc2c9 }
table.std thead th {
background-color: transparent;
background-repeat: no-repeat;

 

or header left

 

 

#header_links a {
display: block;
height: 15px;
color: #595a5e;
padding-top: 19px;
text-align: center;
text-decoration: none;
background-repeat: no-repeat;
background-position: top center;
background-color: transparent

 

or

 

#page .rte { background: transparent none repeat scroll 0 0 }

 

All I need is to set basically the left column/module block as non-transparent. Any idea where to look for that?

[ukmacnut]

Sorry I haven't checked the topic for a while. Did you solve it? Do you have a website URL so I can see the page and maybe offer some help?

 

Did you try to insert this into div.table_block?

 

background-color: white;