Repeating only part of background Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Repeating only part of background

    avatar
    ian2000
    Forumember


    Posts : 42
    Reputation : 3
    Language : English

    In progress Repeating only part of background

    Post by ian2000 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!
    Sir. Mayo
    Sir. Mayo
    Forumember


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

    In progress Re: Repeating only part of background

    Post by Sir. Mayo 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
    avatar
    ian2000
    Forumember


    Posts : 42
    Reputation : 3
    Language : English

    In progress Re: Repeating only part of background

    Post by ian2000 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
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51496
    Reputation : 3523
    Language : English
    Location : United States

    In progress Re: Repeating only part of background

    Post by SLGray 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.
    Sir. Mayo
    Sir. Mayo
    Forumember


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

    In progress Re: Repeating only part of background

    Post by Sir. Mayo 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
    avatar
    ian2000
    Forumember


    Posts : 42
    Reputation : 3
    Language : English

    In progress Re: Repeating only part of background

    Post by ian2000 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
    Fitz
    New Member


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

    In progress Re: Repeating only part of background

    Post by Fitz 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

    Sir. Mayo
    Sir. Mayo
    Forumember


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

    In progress Re: Repeating only part of background

    Post by Sir. Mayo 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;
    }
    avatar
    Fitz
    New Member


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

    In progress Re: Repeating only part of background

    Post by Fitz 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
    ian2000
    Forumember


    Posts : 42
    Reputation : 3
    Language : English

    In progress Re: Repeating only part of background

    Post by ian2000 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