Not sure why but my graphic in the id centerpiece disappeared.
http://www.sara-michael.com/index2.html
why is centerpiece graphic not centered? I tried background-position:center; but that is ignored…why?
If “top:50;” doesn’t move the Scarves text into the black streak, what does?
Paul
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?
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;
}
swmagic:
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 -
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]
}