Cant center large image on my site, please help.

[doc fluty]

im doing divs like

<topbar>
<mainimage>
<content>
<footer>

and I cant get the main image to center. Its 2000px wide and when the browser is small I only see the left end.

I thought about css margins or block... but that doesnt help.

Someone please let me know the small thing I am missing.

What I am trying to do is get the topbar and footer 100% width while the content page is 960px wide... am i going about it the wrong way?

The test domain i am trying this on is bootcamp4me.net

thanks for helping.

 

[conor]

The image looks like it is centred, its just that its 2000px wide which is stopping that from having any noticeable effect. Why do you have the image so wide? You have to scroll horizontally to see the full image - this isn't a very user friendly experience.

The top bar and footer are 100% wide and the content area is 960px wide. 100% means 100% of the visible screen, that's why it doesn't stretch the entire width of the image - if you want it to do that then just set its width to 2000px

 

[doc fluty]

Sorry, im kind of a noob so forgive me.

I just wanted a bigger picture that people with larger screens wont see the edge.

I myself am on a 27" imac so I can see blank areas that some sites have that use smaller images

I just want the image to be centered so if you were on a 1280px screen the image would be centered... as it is right now you just see the left edge.

 

[conor]

I just want the image to be centered so if you were on a 1280px screen the image would be centered... as it is right now you just see the left edge.

oh ok i see what you mean now. thats a tough one. The only way I can think of doing something like that is with javascript. You would have to:

1. set the image as position absolute
2. figure out the page width
3. if its a small width, then add a minus left css attribute

something like that should work - i can do a quick demo if you need further help?

 

[Phreaddee]

Or you could use background-size:cover;
Although the usual suspects struggle with it (ie)
But there would b a solution for that as well.
It would reset the background size at each resolution.
To save kb as your image is quite large, id resize to 1280 anyway.

 

[Edge]

Image seems to have been removed so hard to be sure I'm completely understanding problem but what's the problem with setting as background image on a container div (with width 100%) using:

background: url("foo.png") no-repeat 50% 0 ;