TalkPHP - small Css problem - Thank you in advance..

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - small Css problem - Thank you in advance.. (http://www.talkphp.com/xhtml-html-css/4766-small-css-problem-thank-you-advance.html)

codefreek

07-21-2009 07:13 AM

small Css problem - Thank you in advance..

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.

All times are GMT. The time now is 03:53 PM.