Help me center a sites background image!

Discussion in 'Web Design and Development' started by MattSepeta, Jul 16, 2010.

  1. MattSepeta macrumors 65816

    MattSepeta

    Joined:
    Jul 9, 2009
    Location:
    375th St. Y
    #1
    Hey guys... I used to know my way around CSS alright but have grown a bit rusty. I am trying to center a sites background image, and I cant seem to get it to work. Here is one of the code snippets containing the background image:


    * {margin: 0px; padding: 0px;}
    * html li {vertical-align: bottom;}
    * html img {vertical-align: middle;}
    * html input {vertical-align: middle;}
    body {font-family: Verdana , Georgia ,Arial, Helvetica, sans-serif;font-size:11px; color:#0a0a0a; background:#fff url("images/scripture-music.jpg") no-repeat fixed 0 0; text-align:center;}
    input {border: 0px;}
    img {border: 0px;}
    ul {padding: 0px; margin: 0px;}
    li {padding: 0px; margin: 0px; list-style: none;}
    * html li {vertical-align: bottom;}
    a {color:#575757; text-decoration: none;}
    a:hover {color: #999999; text-decoration: none;}
    a img{border:medium none;float:left;padding:10px 10px 10px 0;}
    p {margin: 0px; padding: 0px;}
    .clear {clear: both; height:0px; display:block; font-size:0px;}
    .left {float: left;}
    .right {float: right;}
    .txt-center {text-align: center;}



    And here is the other part containing the background image, I am not sure which one to center:


    .wrapper { width:940px; margin:auto;clear:both; text-align:left;background: #fff;padding: 0 20px;border: 1px solid #fff;}

    #header{float: left;width: 100%;padding-top: 5px;}
    .header_left{width: 480px;float: left;}
    .header_right{width: 220px;float: right;color: #6e6e6e;text-align: right;padding-right: 25px;font-size: 13px;font-style: italic;}
    .logo{ width:100%; height:198px; float:left; background:url(images/soaking-music.jpg) no-repeat 0 0; margin:0px; padding:0px;}
    .logo a{ width:940px; height:198px; text-indent:-999999px; display:block;margin:0px; padding:0px;}

    .border-line{width:100%;float: left;clear: both;border-top:4px solid #000;background-color: #000;margin-top: 5px;}


    #menu{float: left;width: 100%;}
    #menu ul{float: left;width: 100%;background-color: #000;}
    #menu ul li{list-style-type: none;color: #fff;display: inline;padding: 5px 60px 5px 5px;float: left;font-size: 16px;}
    #menu ul li a{color: #fff;}

    #main_content{float: left;width: 100%;margin-top: 10px;}



    What I am trying to do: I am trying to semi-incorporate the static background into the pager design, so I would like the background image to stay centered in relation to the page content. I want it to stay centered no matter the size of the browser viewing the page, which is not currently happening. Currently, when I resize the browser window viewing the page, the background stays static, and becomes un-centered.

    Help!!!!!! Thanks :)
     
  2. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    This doesn't look right -

    Code:
    body {font-family: Verdana , Georgia ,Arial, Helvetica, sans-serif;font-size:11px; color:#0a0a0a; background:#fff url("images/scripture-music.jpg") no-repeat fixed 0 0; text-align:center;}
    The "fixed 0 0" bit locks the background to the top left corner. I think you need

    Code:
    background:#fff url("images/scripture-music.jpg") fixed 50% 0
    Alternatively you could use

    Code:
    background:#fff url("images/scripture-music.jpg") fixed centre top
     
  3. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #3
    Yep, that should do the trick... :)

    Let us know if you get stuck.

    /Doug
     

Share This Page