Repeating only part of background

Go down

In progress Repeating only part of background

Post by ian2000 on May 23rd 2015, 3:26 am

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:
Repeating only part of background Repeat10

And here is another piece:
Repeating only part of background Repeat11


I would like them to look like this on my forum:
Repeating only part of background Fullpa10


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

Posts : 42
Reputation : 3
Language : English

https://forum.somiibo.com

Back to top Go down

In progress Re: Repeating only part of background

Post by Sir. Mayo on May 23rd 2015, 3:35 am

Could you provide the link for that image?

As in the full image, not a cropped on if possible
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: Repeating only part of background

Post by ian2000 on May 23rd 2015, 3:42 am

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:
Repeating only part of background Full_t10
avatar
ian2000
Forumember

Posts : 42
Reputation : 3
Language : English

https://forum.somiibo.com

Back to top Go down

In progress Re: Repeating only part of background

Post by SLGray on May 23rd 2015, 7:55 am

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


Repeating only part of background Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 45679
Reputation : 3219
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

In progress Re: Repeating only part of background

Post by Sir. Mayo on May 23rd 2015, 10:55 am

Hello,


No need to request it if you have, that is fine but this image should work for you. Repeating only part of background Bg10
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: Repeating only part of background

Post by ian2000 on May 24th 2015, 7:13 am

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?
avatar
ian2000
Forumember

Posts : 42
Reputation : 3
Language : English

https://forum.somiibo.com

Back to top Go down

In progress Re: Repeating only part of background

Post by Fitz on May 25th 2015, 12:38 am

@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:
Repeating only part of background Repeat10

And here is another piece:
Repeating only part of background Repeat11


I would like them to look like this on my forum:
Repeating only part of background Fullpa10


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 ... Wink

avatar
Fitz
New Member

Male Posts : 9
Reputation : 2
Language : french-english

Back to top Go down

In progress Re: Repeating only part of background

Post by Sir. Mayo on May 25th 2015, 12:50 am

@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:
Repeating only part of background Repeat10

And here is another piece:
Repeating only part of background Repeat11


I would like them to look like this on my forum:
Repeating only part of background Fullpa10


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 ... Wink


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;
}
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: Repeating only part of background

Post by Fitz on May 25th 2015, 12:58 am

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;
}

Repeating only part of background Capt10
avatar
Fitz
New Member

Male Posts : 9
Reputation : 2
Language : french-english

Back to top Go down

In progress Re: Repeating only part of background

Post by ian2000 on May 25th 2015, 10:24 am

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
avatar
ian2000
Forumember

Posts : 42
Reputation : 3
Language : English

https://forum.somiibo.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum