Hi,

 

I've been trying to work this out but its driving me mad.

 

I need to create a page background with multicoloured horizontal stripes (i've attached a concept)

 

I need each individual stripe to have its own depth % so that the image displays constant no matter the resolution.

 

Any help would be greatly appreciated.

 

Regards

 

Tony

Had problem attaching file to first post so lets try again

 

Hi Tony,

 

You can use the css background property to set the stripes as background, just include

 

body {
backgrounnd: URL(images/yourbackgroundimage.jpg) ;}

 

it will repeat automatically to make stripes go across the page.

 

not quite sure how to make the size the same at any resolution i'm afraid, but a quick google came up with this solution which inserts an image then lays everything else over the top or this solution which uses javascript

The body background can only take one background image, so that method won't work.

 

You will have to use several divs with position: absolute; height: ?%; totalling 100% for the height and code them first before the page content so that the page content goes on top, and add z-index: -1; .

 

CSS:-

 

#stripe1, #stripe2, #stripe3 { position: absolute; width: 100%; left: 0; z-index: -1; }

#stripe1 { background-image: url(images/stripe1.jpg); height: 20%; top: 0; }

#stripe2 { background-image: url(images/stripe2.jpg); height: 30%; top: 20%; }

#stripe3 { background-image: url(images/stripe3.jpg); height: 25%; top: 50%; }

and others totalling 100% height and each starting the total % below the ones above.

 

Markup:-

 

<body>

<div id="stripe1"> </div>

<div id="stripe2"> </div>

<div id="stripe3"> </div>

plus others

<div id="wrapper">........page content.........</div>

</body>

Hi Stevo & Wickham,

 

Thanks for the response,

 

it was the single background image issue i was having trouble getting my head around.

 

i'll give it a bash, looks like i'll be doing a lot of typing

 

 

cheers

 

Tony

I've just tested my code and it works. I posted it before testing and had to edit it a bit to include the z-index.

Cheers Wickham . . . at least i know if it doesn't work i've done something wrong

I've tried to create the background at instead of absolutely positioning the div's its condensing to the top of the body but i just can't see why

 

i've attached a layout.htm and the .css file

 

i've tried various things but can't crack it, i'm obviously missing something completely obvious

 

the first few stripes add correctly and then it starts condensing upwards for some reason

 

cheers

 

tony

layout.htm

concept_design.css

Delete the body height and position: relative and your code works:

 

body { width:100%; /*height:100%; position:relative;*/ margin:0;

padding:0; }

 

add z-index:-1 to show page content.

 

It shows the background-colors for the 100% height of the viewport correctly in whatever viewport resolution you start with, so it will be OK for any resolution even if you minimise the viewport height and then maximise it again.

 

However, I have discovered one disadvantage. If you have page content that is more than the viewport height and scroll, the backgrounds scroll up too showing a space underneath, so position: fixed would be better but that won't work in IE6 although all modern browsers will be OK.

 

Position: fixed works well but I haven't tested IE6 to see what the effect is there. It will probably act like position: absolute so it will be OK until someone scrolls.

 

I added this after your other styles so the position: fixed would override the position: absolute:-

#stripe1, #stripe2, #stripe3, #stripe4, #stripe5, #stripe6, #stripe7,

#stripe8, #stripe9, #stripe10, #stripe11, #stripe12, #stripe13, #stripe14,

#stripe15, #stripe16, #stripe17, #stripe18, #stripe19, #stripe20,

#stripe21, #stripe22 { position: fixed; z-index: -1; }

 

and added this page content after your divs:-

 

<div>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

<p style="margin-top: 60px;">Main content</p>

</div>

Hi Wickham,

 

thats brilliant thank you.

 

I tried without the body height as i thought i wouldn't need it but it didn't make any difference

 

I thought i would need the position:relative for the position:absolute

 

whenever i've tried to use z-index in the past i never seem to get it right, will it only work under certain conditions or am i doing something wrong. I don't have specifics unfortunately.

 

will i need to add z-index to the other divs

 

the design i'm going to implement will be fixed height so that won't be a problem and i've stopped supporting IE6 now so good riddance to bad rubbish i say

 

thanks again

 

tony

You need position: relative in a parent DIV where the div has position: absolute divs inside, but the body doesn't usually have width or position and only height in other circumstances where you want to control the scrollbar, but not here.

 

It works well in my test with content more than the page height and position: fixed.

Is the solution not the same as doing a graduated background i.e. using Photoshop (or similar) create your stripy background, resize to be 1px wide then save.

 

Then use Stevo's code i.e.

body {
backgrounnd: URL(images/yourbackgroundimage.jpg) ;}

 

maybe throw-in a repeat-x to get it to fill the page and make the background colour the same as the bottom stripe in-case the page is longer than your image

Thanks Wickham

 

Appears to be working the way i want

 

many thanks

 

Tony

Hi NeRo,

 

Thanks for the response . . . i couldn't do it this way as i wanted the stripes to take up the same % of the screen in all resolutions

 

i'm going to be adding text to the largest stripe which will be towards the centre of all screens

 

cheers

 

Tony