SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    centerpiece graphic disappears et.al.

    1. Not sure why but my graphic in the id centerpiece disappeared.

    http://www.sara-michael.com/index2.html

    2. why is centerpiece graphic not centered? I tried background-position:center; but that is ignored...why?

    3. If "top:50;" doesn't move the Scarves text into the black streak, what does?

    Paul

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The image in question returns a 404

    http://www.sara-michael.com/images/HomeScarves.png

    Make sure it is on your server first and then you should be able to center it via BG position.
    Code:
    #centerpiece {
        position:relative;
        background:url(../images/HomeScarves.png)  no-repeat 50% 50%;
        height:550px;
        width:850px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well yup, graphic wasn't there. Now it still looks uncentered though. I thought maybe the #container itself needed to be centered so I added that, but that doesn't do anything either. I left it in for demonstration.

    Any other idea?

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swmagic View Post
    Any other idea?
    Yeah, it would help if you would only put that BG image on one element. You have it on the body and the #centerpiece div.

    And then it looks like your trying to position the body BG by placing styles on the container.

    Here is what you have -

    Code:
    body {
        background: #000000 url(images/HomeScarves.png) no-repeat;
        font: 12px Arial, Helvetica, sans-serif;
        }
    .container{
        background-position:center;
        margin-left: auto;
        margin-right: auto;
        width: 960px;
        }
    #logo {
        background:url(../images/SMLogoButterfly.jpg) no-repeat;
        height: 100px;
        margin:0;
        padding: 0;
        background-position:50px;
        margin-top:50px;
        }
    #centerpiece {
        position:relative;
        background:url(../images/HomeScarves.png) no-repeat 50% 50%;
        height:550px;
        width:850px;
        background-position:center;
        }
    Here is all you need -

    (Get rid of that relative positioning unless you know what your doing with it)
    Code:
    body {
        background: #000;
        font: 12px Arial, Helvetica, sans-serif;
        }
    .container{
        width: 960px;
        margin: auto;
        }
    #logo {
        height: 100px;
        margin-top:50px;
        background:url(../images/SMLogoButterfly.jpg) no-repeat 50px 0;
        }
    #centerpiece {
        height:550px;
        width:850px;
        margin: auto;
        background:url(../images/HomeScarves.png) no-repeat 0 0;
        }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •