Centering the Background for small resolutions 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.
2 posters

    Centering the Background for small resolutions

    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 6:13 pm

    Hey

    I designed the background with 1920x1080 resolution in mind, and when i change the resolution to anything small than that the background won't be aligned no more with the rest of the forum.

    This is how it's supposed to look (1920x1080)
    Centering the Background for small resolutions 9R6zy

    and this is a small resolution (1280x720)
    Centering the Background for small resolutions ELjnC

    I tried experimenting with the body in CSS with static and background-size but i never managed to have it centered.
    Pretty much what i'm looking for is that if an user is using a smaller resolution, both sides will be hidden.
    nextlevelgaming
    nextlevelgaming
    Forumember


    Male Posts : 989
    Reputation : 38
    Language : English|CSS|HTML5|javascript|
    Location : New York

    Solved Re: Centering the Background for small resolutions

    Post by nextlevelgaming October 17th 2012, 7:34 pm

    What is your css??? the problem is not the bg but better yet your "body line" Use chrome to see your CSS for that specific item. Set margin:0 auto; also width would need to be a percentage not fixed. ex. 80% not 900px. If you also use FF you can use firebug, edit your css until correct and then use that style that you generated live
    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Re: Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 7:39 pm

    Current .body is like this

    Code:

    body {
              background-image: url('http://i.imgur.com/238DK.jpg');
              background-size: 100%;
              background-position: top-center;
              width: 100%;
    }

    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Re: Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 8:48 pm

    How much ? (resolution)

    Also it seems that the background image is just using the top left corner as a center reference no matter what the resolution is.
    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Re: Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 8:53 pm


    I think i'm following you.
    I'll try editing the background and report later.

    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Re: Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 8:59 pm

    hmm, i just checked the middle area and it's bigger than 1200 by a couple of pixels on both sides, so it shouldn't give me any troubles right ?

    the selection shows a width of 1200
    Centering the Background for small resolutions 4iXHj

    PT-Desu
    PT-Desu
    Forumember


    Posts : 54
    Reputation : 1
    Language : Portuguese

    Solved Re: Centering the Background for small resolutions

    Post by PT-Desu October 17th 2012, 9:14 pm

    That fixed it, tested a couple of different resolutions and the background wouldn't overlay the rest of the forum.

    thanks again Smile

    -Solved-