Hi everyone............I'm presently tearing my hair out with this problem and need some help.
I am trying to center a background image in a website I'm putting together.
The image centers fine in Netascape 9, IE6 and Firefox 2.0.0.11 in 1024x768 and 800X600 resolution, with the exeption being IE6 with a one pixel shift from the layout components in 1024X768 only, any ideas?
The real problem is when Firefox displays in 800x600 res, then the background shifts to the left displaying about 90% of the image and a border to the right. All the other elements are positioning correctly.
I have tried many configurations with the css with no luck, I am not a genius here by the way.
My background gif is 922px X 20px

This is the CSS code I'm using.

body {
background-color:679D9F;
background-image:url( "Images\\BuGryPatBackL.gif" );
background-position:center;
background-repeat:repeat-y;
}

Any pointers greatly appreciated. Cheers

Is "background-position:center;" even supported?

Lets see a URL or ALL the code. No way we can help with just that small snippet of code.

This is the current style CSS

/* Text */
body {
background-color:85BDBA;
background-image:url( "../assets/images/BuGryPatBackL.gif" );
background-position:center;
background-repeat:repeat-y
}

/* Forms */


/* Secure Site */
.nof_secureSite_label {
display: block;
white-space: nowrap;
text-align: right;
padding-left: 5px;
cursor: pointer
}
.nof_secureSite_input_button {
margin-right: 5px
}
.nof_secureSite_input_reset {
margin-right: 5px
}
.nof_secureSite_input_submit {
margin-right: 5px
}
.nof_secureSite_errorText {
color: rgb(255,0,0)
}
.nof_secureSite_successText {
font-weight: bold;
width: 100%;
display: block;
text-align: center;
background-color: rgb(255,204,0);
padding: 3px
}
.nof_secureSite_text {
font-family: Arial;
font-size: 13px
}
.nof_secureSite_link {
color: rgb(31,75,140);
font-size: 13px;
font-weight: bold;
text-decoration: none
}
.nof_secureSite_header {
background-color: rgb(173,199,238);
border: 2px solid rgb(127,186,243);
padding: 5px
}
.nof_secureSite_footer {
background-color: rgb(173,199,238);
border: 2px solid rgb(127,186,243);
padding: 2px
}
.nof_secureSite_contentCell {
padding: 2px
}
.nof_secureSite_columnHeadingRow {
background-color: rgb(211,208,208);
padding: 3px;
font-weight: bold
}
.nof_secureSite_heading {
font-weight: bold;
color: rgb(58,58,85);
font-size: 14px
}
.nof_secureSite_content {
background-color: rgb(237,237,237);
padding: 2px;
border-left: 2px solid rgb(127,186,243);
border-right: 2px solid rgb(127,186,243)
}

/* New */



A{ color : rgb(0,51,153);
font-family : Arial;
font-size : 12px
}
A:visited{ color : rgb(0,51,153)
}
A:active{ color : rgb(5,206,204)
}
p{ font-family : Arial;
font-size : 12px
}
.TextObject{ font-family : Arial;
font-size : 12px
}
h1{ font-family : Arial;
font-size : 12px
}
h2{ font-family : Arial;
font-size : 12px
}
h3{ font-family : Arial;
font-size : 12px
}
h4{ font-family : Arial;
font-size : 12px
}
h5{ font-family : Arial;
font-size : 12px
}


.nof_EmptyStyleNavbar4-Regular {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(53,76,95)
}

.nof_EmptyStyleNavbar5-Rollover {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(90,146,192)
}

.nof_EmptyStyleNavbar6-Highlighted {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(53,76,95)
}

.nof_EmptyStyleNavbar7-HighlightedRollover {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(255,102,51)
}

.nof_EmptyStyleNavbar9-Regular {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(53,76,95)
}

.nof_EmptyStyleNavbar10-Rollover {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(90,146,192)
}

.nof_EmptyStyleNavbar11-Highlighted {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(53,76,95)
}

.nof_EmptyStyleNavbar12-HighlightedRollover {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size : 11px;
font-style : normal;
font-weight : bold;
color : rgb(255,102,51)
}A:hover{ color : rgb(102,179,255)
}

Originally Posted by Decaf

Is "background-position:center;" even supported?

Yes it is.

Originally Posted by Rayo

Hi everyone............I'm presently tearing my hair out with this problem and need some help.
I am trying to center a background image in a website I'm putting together.
The image centers fine in Netascape 9, IE6 and Firefox 2.0.0.11 in 1024x768 and 800X600 resolution, with the exeption being IE6 with a one pixel shift from the layout components in 1024X768 only, any ideas?
The real problem is when Firefox displays in 800x600 res, then the background shifts to the left displaying about 90% of the image and a border to the right. All the other elements are positioning correctly.
I have tried many configurations with the css with no luck, I am not a genius here by the way.
My background gif is 922px X 20px

In internet explorer, 1 pixel hack is quite common.

body {
margin:0; 
margin-left:1px //* for IE *//
}
html>body {
margin:0
} 

Dont know about firefox 800x600 resolution, can't you make your background 800 pixel wide? If you think about it, then you cant center something, that is wider than the screen, so you have to make the background 800 pixels wide, unless there is some kind of hack invented for that.

And the html ?? You're using tables for layout ???

OOPS.........slipped in the wrong style CSS......the site is dynamic page layout
and that style was a remnant of desperate attempts to correct the firefox problem. I have now put the correct style CSS in that post.
Thanks to Joak1m for the tip on the IE problem but I think I have tried that fix but couldn't get it to work. Good suggestion about using a background image
of 800px wide..... that would work but I am trying to avoid a small looking webpage at higher resolutions.
Any suggestions very welcome.

Rayo

Well, the point is, that when someone is viewing your page with IE, then the margin must be 1px. You should use separate code for IE using CSS Conditional comments for example.. http://www.quirksmode.org/css/condcom.html or search from Google

Thanks for the pointers Joak1m

Sorry, but we really need to see the ENTIRE thing - got a url?
Saying that a 1px margin is the solution is just too vague.

Originally Posted by LadynRed

Sorry, but we really need to see the ENTIRE thing - got a url?
Saying that a 1px margin is the solution is just too vague.

How come, if it is a common bug for Internet Explorer browsers, when it comes to centering the background images?

Show me where it says this is a common bug ? I can't say that I've ever had that problem, and I use bg images ALL the time.

Besides, you have not seen ALL of the code, you're making a broad statement based on half the information

Yes, I haven't seen all the code, but I understood the problem, because I had same one not long ago.
See yourself from HERE and test it with IE and all other browsers. The bug is not just about backgrounding the images.

http://developedtraffic.com/2005/09/...e-offset-hack/
http://www.positioniseverything.net./bg-centering.html

That's a really old article, but thanks. PIE is one of my resources sites.
I suppose I've never run into that problem because of the way I code my sites and use my bg images, so it has never manifested itself.

Hi everyone.........thanks for the feedback so far.
The website concerned is in the process of structural and content upgrades at present so I have uploaded a bare example of the problem without any mush for simplicity (at LadynRed's request of course).
You can see it here www.petest.pwp.blueyonder.co.uk/index.html

Cheers

The use of <div align="center"> is not the best way to do that, use css and margin:0 auto to center the site, and you define a width for a 'container' that holds everything else.

Your other problem is the use of tables for layout -- not the best approach.

Thank's for the help LadynRed it's well appreciated, but there goes another pile of hair.
Sorry about the tables, I meant to upload the test in fixed page layout or semantic XHTML.
Well, I have been trying all morning and some to get this thing to work....first with fixed page layout using this css script:

#global {
background-image:url( "Images\\BuGryPatBackL.gif" );
margin: 0 auto;
width: 922px;
}

and this in the page body but the div id was ignored

<div id="global">

Then I tried every possible combination I could think of.

I then tried this and all combinations with semantic XHTML and it worked for firefox but internet explorer got messed up....it was at this point I nearly started to cry but we'll leave it there. I need to do some serious CSS studies.
I have uploaded the test page in fixed page layout with the last style CSS used and I am using netobjects fusion 11 if thats any help. If you can find time, have a look and tell me whats wrong (be cruel).
Well I'm off out now for my mid week tipple so I can forget what I don't know.
Thanks for your help.

background-image:url( "Images\\BuGryPatBackL.gif" );

First, you don't need the quotes around the path.
Second, the path isn't correct with the 2 \\ in there.

I looked at your 'new' code, you are seriously over complicating that layout. As with all WYSIWYG programs like NOF, it creates some really ugly code, all with position:absolute. You do NOT want to go down that road.

Your layout if very simple - try this:

<div id="container">
<div id="banner">
<h1>Banner</h1>
</div><!-- end banner -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero turpis, lacinia in, dictum nec, posuere non, quam. Nullam eu nunc. Suspendisse mi eros, semper eget, vulputate sit amet, luctus vel, massa. Suspendisse id velit sit amet tortor pellentesque laoreet. In lobortis luctus enim. Nunc luctus risus sit amet ante vehicula congue. Phasellus quis eros id augue vehicula tempus. Aenean pharetra velit non elit venenatis bibendum. Donec augue velit, tempor at, venenatis id, lacinia sodales, magna. Vivamus adipiscing quam in metus. Integer condimentum nulla ac dui. Aliquam erat volutpat. In velit. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam at purus porta felis ullamcorper pretium. Vivamus pulvinar. Sed tellus augue, imperdiet vel, varius quis, hendrerit non, pede. Donec feugiat tincidunt lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu odio et orci ultrices aliquet. Curabitur at magna sed sapien tempor rhoncus.</p>
</div><!-- end content -->



</div><!-- end container -->

With this CSS:

body, #container, #banner, #content, #footer, #nav, p, ul, li, a{
margin: 0;
padding: 0;
} /*reset */

body {
margin: 0;
padding: 0;
font-size: 100.1% /* compensates for rounding errors*/
}

#container{
width: 922px;
margin: 0 auto; /*centers container*/
background: url(BuGryPatBackL.gif) repeat-y;
height: 500px; /* only needed to show example */
}

#banner{
height: 96px;
background: #fff8dc;
padding-top: 1px; /* removes margin collapse */
}

#content{
width: 657px;
margin: 0 auto;
background: #fff;
height: 300px;
font-family : Trebuchet MS;
font-size: .70em; /*equates to 11px text size*/
}
#content p{
padding: .5em 10px;
line-height: 1.25em;
}

No background centering problem, no absolute positioning.

WOW! LadynRed your truly good at this...thanks for the pointers.
Yes the // is wrong...a slip on the keyboard.
As for NOF and position absolute etc, NOF automaticaly puts code in which conflicts with whatever else your trying to do, and I am not sure yet how to get around this with fixed page layout in NOF.
I see exactly what is wrong when I look at your code. I need to get NOF to write code that works, or write little and let me write it.
Thank's a lot for your help and if I could get near ya, I'd kiss ya.

Glad to help. I haven't touched NOF in many years, so I can't help you with settings. Using any program in strictly WYSIWYG mode usually results in tons of absolutely positioned elements. The best way to do it is to learn to code it yourself