small Css problem - Thank you in advance..

codefreek · 07-21-2009, 07:13 AM

css Code:

#ImgHolder{width:840px; height:250px; background:url(images/image1.jpg) 0 100% no-repeat; background-position:center; padding:29px 0 0; margin:0 0 40px 0;}

Why when i "background-position:center;".. It, Wont Center.
The Image,

Thank you.

-Cf

Hightower · 07-21-2009, 08:01 AM

I'm not the most fluent with CSS, but could it be this:

background:url(images/image1.jpg) 0 100% no-repeat; (the 100% bit)

Like I say, this is just a stab in the dark.

codefreek · 07-21-2009, 08:16 AM

not it.. sorry but thanks for comment and trying to help,
much appreciated.

-Cf

tony · 07-21-2009, 01:32 PM

have you try using 2 keywords:

Code:

background-position:top center;

If that doesn't work, it's because the center keyword doesn't work right in most browsers (that's my personal experience). I always use the percentages:

Code:

/*                  y x  */
background-position:0 50%;

you just need to calibrate the 50% percentage so it can be in the center

codefreek · 07-22-2009, 02:33 PM

css Code:

#offset{width:384px; float:left; padding:0 0 0 202px;}
#IMGholder{width:840px; height:250px; background:url(images/image1.jpg) 0 100% no-repeat; padding:29px 0 0; margin:0 0 40px 0;}

so i solved it by turning the 202px part to 202px..

Quote:

#offset{ 202px;}

Rhinos · 08-19-2009, 06:05 PM

It should be:

Code:

#ImgHolder {
  width: 840px;
  height: 250px;
  background: url(images/image1.jpg) no-repeat 50% 50%;
  padding: 29px 0 0;
  margin: 0 0 40px 0;
}

Now I don't know what your paddings and margins do but the 50% 50% is what puts it in the center of the 'box'.

You can try it here on W3CSchools by changing the background-position values and clicking the 'Edit and Click Me >>' button to see the changes.