Centerpiece graphic disappears et.al

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

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

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

  2. If “top:50;” doesn’t move the Scarves text into the black streak, what does?

Paul

2

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?

3

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.


#centerpiece {
    position:relative;
    background:url(../images/HomeScarves.png)  no-repeat [COLOR=Blue]50% 50%[/COLOR];
    height:550px;
    width:850px;
}
4

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. :confused:

Here is what you have -

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

Here is all you need -

(Get rid of that relative positioning unless you know what your doing with it)

body {
    [COLOR=Blue]background: #000;[/COLOR]
    font: 12px Arial, Helvetica, sans-serif;
    }
.container{
[COLOR=Blue]    width: 960px;
    margin: auto;[/COLOR]
    }
#logo {
    height: 100px;
    margin-top:50px;
    [COLOR=Blue]background:url(../images/SMLogoButterfly.jpg) no-repeat 50px 0;[/COLOR]
    }
#centerpiece {
    height:550px;
    width:850px;
[COLOR=Blue]    margin: auto;
    background:url(../images/HomeScarves.png) no-repeat 0 0;[/COLOR]
    }