Background Image Position

I am struggling with a bit of code on a new coded layout for my website. I have got everything how i want it apart from a fixed background. I can't seem to get the background image to fit centre with the content.
The page is www.fcbs.co.uk/test2.html

I have changed various positioning but can't seem to get it centre on IE 6, IE 7 and Firefox.

Has anyone here got any suggestions?

Thanks

 

Hello,
The problem is in your fcbs.css, in the following:
#content{
border-left:1px solid #E3E3E3; margin:0px; position: relative;
background-image: url('images/contentbackground.jpg');
background-repeat: no-repeat;
background-attachment: fixed
}
Change this to :
#content{
border-left:1px solid #E3E3E3; margin:0px; position: relative;
background-image: url('images/contentbackground.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed
}
This will add the image to the center of the page from top to bottom center, and left to right center. Here are the rest of the definitions that can be used as the position of the background image:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Glad I could help,
Mike

 

Thanks for your reply, but i have tried this and the image isn't fully centre with the content div. I have changed it so you can see what i mean.
It must be my layout design.
Is there a way of placing the background image on a different part of the code?

 

Hi,
Looks center to me, I see you are using top center?
Here is an image
To answer your question maybe you could create a table for that part of the page, and add the background image there, and remove it from the .css.

Mike

 

I'd rather keep my layout tableless. Your image preview is on an IE 6 browser. This is how i want it to look on other browsers as well.
When i see the page in Firefox and IE 7 it isn't centre.

 

Hi,
I found this link that might be of use to you:
Click here
Let me know if this helps,
Mike

 

Thanks, I'll take a look and let you know

 

Hey,
I installed FireFox and I see what you mean. It is centering to the whole page and the not content DIV. There are fixes on that link that will surely help.
Mike

 

Thanks, but it is a slightly different issue to mine

 

Hey,
Try to change this:
#content {
border-left:1px solid #E3E3E3;
margin: 0px;
position: relative;
background-image: url('images/contentbackground.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed
}
To this:
#content {
border-left:1px solid #E3E3E3;
margin: 0px;
position: relative;
background-image: url('images/contentbackground.jpg');
background-repeat: no-repeat;
background-position: top center;
}

Just remove this:
background-attachment: fixed

Seems to fix it
Mike

 

Thanks Mike. That's got it centre but it now doesn't scroll down with the page.

any other suggestions anyone?