Repeating only part of background

Hello!

So my background is getting dull and I would love to change it.

My idea is having part of my background repeat horizontally, and the other part repeat in all other directions. 

So for example here is one of my pieces of my background:


And here is another piece:



I would like them to look like this on my forum:



as you can see, the trees repeat across the top ONLY and the grass repeats everywhere else. Thanks!

Could you provide the link for that image?

As in the full image, not a cropped on if possible

Thanks for the quick response. I provided the cropped trees because I thought there was a trick to making them repeat. I did actually crop it in a place where, if repeated from left to right, they would be seamless.

Anyway here's 10 or so of that same image composed together:

The best thing would be to combine the two images together.  You can request it in the graphics section.

Hello,


No need to request it if you have, that is fine but this image should work for you.

Yeah actually I was thinking of doing just a massive picture. But is it more efficient to have smaller pictures that just repeat themselves (using CSS)?

AKA transferring a large picture might be less efficent that two smaller ones right?

ian2000 wrote:Hello!

So my background is getting dull and I would love to change it.

My idea is having part of my background repeat horizontally, and the other part repeat in all other directions. 

So for example here is one of my pieces of my background:


And here is another piece:



I would like them to look like this on my forum:



as you can see, the trees repeat across the top ONLY and the grass repeats everywhere else. Thanks!

hello !

Code: background-image: url(http://i19.servimg.com/u/f19/19/09/43/11/repeat10.png), url(http://i19.servimg.com/u/f19/19/09/43/11/repeat11.png); background-position: top center,center; background-repeat: repeat-x,repeat; This is a table of 700x500, not a picture ...

Fitz wrote:

ian2000 wrote:Hello!

So my background is getting dull and I would love to change it.

My idea is having part of my background repeat horizontally, and the other part repeat in all other directions. 

So for example here is one of my pieces of my background:


And here is another piece:



I would like them to look like this on my forum:



as you can see, the trees repeat across the top ONLY and the grass repeats everywhere else. Thanks!

hello !

Code: background-image: url(http://i19.servimg.com/u/f19/19/09/43/11/repeat10.png), url(http://i19.servimg.com/u/f19/19/09/43/11/repeat11.png); background-position: top center,center; background-repeat: repeat-x,repeat; This is a table of 700x500, not a picture ...

Hello,
@Fitz
Just wanted to point out your css had no selector, so at the moment i would not change anything did you mean

Code:

*
{
background-image: url(http://i19.servimg.com/u/f19/19/09/43/11/repeat10.png), url(http://i19.servimg.com/u/f19/19/09/43/11/repeat11.png);
background-position: top center,center;
background-repeat: repeat-x,repeat;
}

if the CSS is for the body of the forum :

Code:

body
{
background-image: url(http://i19.servimg.com/u/f19/19/09/43/11/repeat10.png), url(http://i19.servimg.com/u/f19/19/09/43/11/repeat11.png);
background-position: top center,center;
background-repeat: repeat-x,repeat;
}

it can be have a margin-top of 200px ...

look like this :

Code:

body
{
background-image: url(http://i19.servimg.com/u/f19/19/09/43/11/repeat10.png), url(http://i19.servimg.com/u/f19/19/09/43/11/repeat11.png);
background-position: top center,center;
background-repeat: repeat-x,repeat;
margin-top:200px;
}

Ahh yes @Fitz this is really cool. Didn't know it could be done this way.

Big thanks to everyone else that posted, I think it looks pretty good now! I learned a lot.

Check it out if you get a chance,
Onyx Legion