css background images

[pinbrook]

I'm trying to work with Actinic and not against it but.....

I want to have a simple background image so i have created a 918 px wide / 5 px high image and added it to actinic css in the very first body declaration

/* begin general styles for all themes */
html,body {
	margin: 0px;
	padding: 0px;
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20True">
	background-color:<actinic:variable name="BGColor"/>;
	</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20False">
	background-image: url("<actinic:variable name="BackgroundImageFileName" />") center top repeat;
	</actinic:block>
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	color: <actinic:variable name="TextColor" />;
	font-size: <actinic:variable name="StandardFontSize" />;
}

ok not bad, except my bg image doesn't show in FF, but does show in IE and i would like to also use the background colour (actinic seems to make them mutually exclusive) I want the bg colour so I am multi res compatible, so i'll remove the block if or add bg colour to the bg dec.

I'm using css to define my site as 900 px wide so I have a #wrapper defining that.

So my Q is what is the best way to get a bg image into the site, centred

see attached image, i'm tryin gto get the drop shadow on the left/right ofthe body to work

Second

[pinbrook]

this is probably easier to decypher

html,body {
	margin: 0px;
	padding: 0px;	
	background-image: url('bg.gif)  center top repeat;
        background-color: #FFFFFF;
	}

wrapper

#wrapper {

	width: 900px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

[peblaco]

To define all styles in one property use shorthand. background: #ffffff url("bg.gif") center top repeat-y;

[pinbrook]

Thanks Louise thats resolved it, I was abit confused wasn't I - mixing and not matching my declarations.

[jont]

background: #ffffff url("bg.gif") center top repeat-y;

Not forgetting Actinic preference for single quotes for images.

[leehack]

I'd love to know what i do different to anyone else, i for the life of me cannot get a background image to work in an external stylesheet, yet if i copy the exact contents into the actinic stylesheet it works perfectly, so i know it is not my coding.

I wonder if it is because i have them in sub folders, hmmm maybe that's the bug, actinic can't handle them in sub folders when in external stylesheets.

[leehack]

What i experience is really strange, the preview works perfectly, but when uploaded the CSS goes haywire, loads of things lose their colours and it is basically trashed. If you cut the styles out of the external sheet and paste into the actinic sheet and upload, it works perfectly straight away.

It's really annoying as i currently have my own styles in my own stylesheet and then need to copy the background parts of my styles into the actinic sheet so that they work.

I'd love to get to the bottom of it, has me perplexed at the moment.

[pinbrook]

I add all my css to the bottom of actinc stylesheet so i know it gets priority.

when the job is pretty well finished i then strip out all the actinic css i didn't use, thus getting a smaller file

i never use sub folders for images

[peblaco]

I put any CSS images in Site1 just to be sure it works.

[jont]

I put any CSS images in Site1

Yep - it the sanest thing to do. As there are generally not that many it is not a big issue to have them sitting in the root of Site1 - if finding them is a problem then prefixing with css_ may be worth considering.