Programmer trying to design :-( need help with positioning background images

Hello everyone, I’m going to come clean and admit I’m no designer, but I’m trying… :slight_smile:
I have enclosed a picture with the site I’m trying to create.

The problem is that I need the background images (the black on the left and white on the right) not to move when the browser resizes…
It’s kinda hard for me to explaine… so bare with me…

Where the to images meet in the middle, you can see a menu on the left and content on the right. I will use a wrapper with margin auto to contain these
elements. Now if I have my wrapper centered on the screen, how to I keep the background images to not move when different resolutions than mine are used
or the client resizes the brower?

ANY help here would be greet:

Ty in advance.

It’s not hard to do that if your wrapper has a fixed width. So does it have a fixed width? If so, you can create a background image that goes on the body element, say 2000px wide and 10px tall, that has the black and white colors on it, with the black part moved a certain number of px to the left. I’ll explain further if you confirm that this is fixed width. :slight_smile:

wrapper is 960px… but its two different pictures on the background… take a look at the uploaded example… really hope this is possible

Yes, it is possible.

Firstly, create an image about 3000px by 10px with a bg color of #f4f4f4.

Then, in Photoshop, draw a guideline at the middle of the image. Then look at your page layout, and work out how much of your 960px wrapper is white and how much is black (or whatever that darker bg color is). E.g. say the white area covers 700px and the black area 260px. In that case, draw another guideline 220px to the left of the center guideline. Then color everything from that line to the left edge of the image with black. So you end up with a long image that black and white, but with a bit more white than black.

Now save that image for the web (e.g. bg.gif), upload to your site, and set it as a bg image on the body:

body {background: url(bg.gif) repeat-y 50% 0;}

Does that make sense?

The image should end up looking something like this:

ok mate… will give a go when the kids leave dad alone to work for 20 minutes :slight_smile:
I’ll keep you updated.

Great, please do. :slight_smile:


will give a go when the kids leave dad alone to work for 20 minutes

Let them know who’s boss before it’s too late![/ot]

why 220px to the left and not 260px?

If your sidebar’s right edge is 260px from the left of the wrapper (for argument’s sake) and your wrapper 960px wide, that leaves 220px from the right edge of the sidebar to the middle of the wrapper. 480px - 260px = 220px.

Basically you want to center the background image on the screen, but your want the back part or the background to appear slightly to the left, so you move it to the left in the image itself. Does that make sense?

Here’s a rough example of what I mean.

thx… works grt!

you could also do this:

		<style type="text/css">
			.shell1{background: #000; width: 50%; float:left;}
			.shell2{  background: #ccc;  margin-right: -100%; float:right; width:100%}
			.page{width:700px; border-left:260px solid #555; background: pink; margin-left:-480px;}
			.aside{color:#fff; width:260px;  float:left; margin-left:-260px; }

	<div class="shell1"><div class="shell2">
		<div class="page">
			<div class="aside">sidebar </div>
			<div class="content">The rest of your mark up would go here. </div>

( I used different BG colors so you could see what code was performing what function). It adds a little more markup but saves the photoshop trouble, allows for bg images with gradients ,etc.

Thx for the tips, I went with Ralph’s advice as he had already posted an answer which it worked fine. I have copied your code and will have a look at for the next project. Thx for your input.