I wanted to create a stripe from one side of the page to the other, no matter the resolution.

So I used this code:

 

body {
background:url('url/to/img.png') repeat-x;
}

 

I created that way a pattern with an image that repeats itself so it creates a stripe.

Now I want to add another stripe at another part of the page. How do I set another stripe at a different place with that code?

http://www.css3.info/preview/multiple-backgrounds/ have a read throgh that

Okay and if I want to write the position then it should be something like "background-position: left top, 1,1035;"

 

Am I right?

i dont know unless you post up a link to the test site or you post some code for me to test

You can just separate multiple background images with a comma. Either like this,

 

 

/*could all be on one line*/

background: url('../images/bg-image.png') 50% 50% no-repeat, 
            url('../images/bg-image2.png') 100px 250px repeat-x, 
            url('../images/bg-image3.png') 300px 300px no-repeat;

 

 

or separate each set of values, like this,

 

 

background-color : #B4DA55;
background-image : url('../images/bg-image.png'), url('../images/bg-image2.png'), url('../images/bg-image3.png');
background-repeat : no-repeat, repeat-x, repeat;
background-position : 100% 95%, -10% 100%, 0 0; 
 

 

Edited August 6, 201313 yr by JustOliver

 

You can just separate multiple background images with a comma. Either like this,

 

 

/*could all be on one line*/

background: url('../images/bg-image.png') 50% 50% no-repeat, 
            url('../images/bg-image2.png') 100px 250px repeat-x, 
            url('../images/bg-image3.png') 300px 300px no-repeat;

 

 

or separate each set of values, like this,

 

 

background-color : #B4DA55;
background-image : url('../images/bg-image.png'), url('../images/bg-image2.png'), url('../images/bg-image3.png');
background-repeat : no-repeat, repeat-x, repeat;
background-position : 100% 95%, -10% 100%, 0 0; 
 

 

 

 

Okay then lets say I want this image to be at the top with repeat x:

http://imageshack.us/a/img689/4559/5f7a.jpg

 

And this image at the bottom repeat x too:

http://imageshack.us/a/img203/7673/2cs8.jpg

 

What do I need to write in the first code to do that and do I paste it in the CSS just the way it is?

background:url('http://imageshack.us/a/img689/4559/5f7a.jpg') top repeat-x, url('http://imageshack.us/a/img203/7673/2cs8.jpg') bottom repeat-x;

that should work for you

Edited August 7, 201313 yr by D4Y0

if it's a simple stripe then you can take it a step further and just use the css linear gradients avoiding the need for an image which is always a plus.

 

I knocked up a quick fiddle demonstrating how it can be done, I also threw in a regular css gradient so you can see how the syntax differs between a gradual gradient and a more instant change in colour.

 

http://jsfiddle.net/vyYz5/

 

* If you use this code don't forget to add in the other vendor prefixes.