CSS Being gay.

[VaginaMuncher]

Okay so I'm trying to align that image in the header bang on in the middle using pure css;

.Logo {
background:url(../images/Index/Logo.png);
width:97px;
height:56px;
position: absolute;
left: 50%;
}

But as you can probably see the '50%' isn't making it fully in the center, it's more towards the right. I usually don't have this problem but this is a image so I don't really know what's different.

 

[T3ch]

screen shot of the image and i can help

 

[VaginaMuncher]

Oh sorry I thought I posted it;

You must be registered for see links

:

 

[T3ch]

also you didnt post the image lol

 

[VaginaMuncher]

.centerPic
{
position:fixed;
left:50%;
top:50%;
margin-left:-382px;/* Static value */
margin-top:-370px;/* Static value */}
But this approach limits your use of other pictures of different sizes. I suggest you set the margin-left and margin-top properties depending on your picture sizes in dynamic javascript instead:

functionSetCenterStyle(objPic){
objPic.className ="centerPic";
objPic.style.marginLeft =(-1*( parseInt(objPic.width)/2))+"px";
objPic.style.marginTop =(-1*( parseInt(objPic.height)/2))+"px";}
(You can then of cause omit the margin-left and margin-top settings in the centerPic class)

I wanna use pure css as I stated. None of that even works and there are easy ways for this.

Sorry for double posting but;

You must be registered for see links

my bad

 

[T3ch]

.img {
overflow: hidden;
background-url: url('/xyz.jpg');
background-size: cover;
background-position: center;

 

[VaginaMuncher]

.img {
overflow: hidden;
background-url: url('/xyz.jpg');
background-size: cover;
background-position: center;

Cover isn't supported for legit css and does not work..

 

[Sysode]

I recently made a little pen for this sort of issue as a lot of people often have the problem. I won't give the answer to you as you probably won't learn for next time. Take a look at my pen:

You must be registered for see links

and see if you can work the answer out for yourself.


+ background-size:cover; is legit and it does work, just not for your particular situation.

 

[VaginaMuncher]

I recently made a little pen for this sort of issue as a lot of people often have the problem. I won't give the answer to you as you probably won't learn for next time. Take a look at my pen:

You must be registered for see links

and see if you can work the answer out for yourself.

Thank's Ill take a look and hopefully find out

 

[Markshall]

Usually I apply margin:0 auto; to the element, it works for me most of the time.