Wide image to center

HTML & CSS
1

Hi,

i was wondering how to have always centered a wide image on my screen.
i mean basically web users have a screen resolution 1024x768 (at least…).
if i have a div horizontally centered, in which i have all my website texts, and i have a wide image e.g. 2000x500, how to make this image always center with my main text div ?
it’s to say if web user have a screen resolution 1280x1024 my text and my image seem to be still centered together but user see more of my image on both side.

thanks a lot,

A.

2

… and to confirm what Ralph said imagine what would happen if you placed the image at background-position:100% 100%;? If it didn’t relate to 100% of the image then the image would be placed outside of the container it sits in and be invisible.:slight_smile:

The percentage in the background-position is not the same as position:absolute; left:100% where the left edge is placed a 100%.

3

As Kalon pointed out that is not correct when you are dealing with background positions.

http://www.css-lab.com/misc-test/bg-position.html

50% on the x-axis will place the image in the center, likewise with the y-axis.

It is not the same as using offset values with positioned elements.

4

if you use “body {background: rgb(139,69,19) url(“bg_image.jpg”) repeat-y 50% 0;}”

the left edge of bg_image.jpg will be placed at 50 of the width of the viewport… wich is not really centered.

body {background: rgb(139,69,19) url(“bg_image.jpg”) repeat-y center 0;} the bg-image will actually be centered to the width of its container.

5

Yeah, the thing to remember with using % positioning on background images is that it matches the % of the container with the same % on the image.

For example, a position of 50% on the x-axis matches the middle of the image with the middle of the container.

6

I assume you want a centered background image regardless of the screen width and the web page content to be centered above the bg image.

 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: rgb(139,69,19) url("bg_image.jpg") repeat-y 50% 0;
}
 
#wrap {
width: 950px;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px
}
 
//---------------------------------------------------
 
<body>
 
<div id="wrap">
    <p>Page content</p>
</div>
 
</body>
7

A 2000x500 image won’t even fit in that container, but if you want an image centered within a container, then simply having the container have text-align:center set, and <img> inside the container will center it :).

I wasn’t really able to understand anything else other then you want an image centered (my brain refuses to function right now :()

8

To center something using CSS you set the left and right marigins to auto.
I would say set your image as a background in a div. Wrap the new background div around the contents div


<div id='background'>
<div id="content">
text
</div>
</div>
9

hmmmmmmmm :scratch:

Have you actually tried it before posting?

In this demo code I am using a 640px wide x 394px high image as the backround.

In my IE8, FF3.6 and Opera 10 the middle of the width of the image is placed at 50% of the width of the viewport thus centering the image.

What browser and version did you test my css in?

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: rgb(139,69,19) url("pic1.jpg") repeat-y 50% 0;
}
 
#content {
width: 100px;
height: 100px;
background-color: green;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
}
 
</style>
 
</head>
<body>
 
<div id="content"><div>
 
</body>
</html>
10

I think you could use something like:


background: url(yourImage.gif) center center;