centering image using :before

[constelllations]

hi,

i've been struggling with this for a bit and could use some help. trying to center an image contained in body:before. is there a way to do this? i've tried a few different things.

CSS:

body:before {
content: url("header.png");
margin: 0 auto;
}

[Major_Payne]

Must set a width less than 100% to have centering.

The :before and :after pseudo-elements [w3.org]

[constelllations]

is there any way to ensure the image will be centered while using a specified width? with width:63% the image appears to be centered, but i feel like this won't work for every user based on their resolution.

[constelllations]

nevermind, i figured it out.

html i used was originally:

<div class="header"><img src="header.png"></div>

...in order to display the image. i was attempting to get the header to not select by using body:before to insert it, but kept running into centering problems. finally i tried this--

CSS:

body:before {
content: url("header.png");
display:run-in;
}

and it worked, until i removed the original image. as a ghettofix i tried removing the original source code for the image, and it worked-- the body:before image remained centered thanks to the div properties. final css and html were then:

<div class="header"></div>

and CSS--

.header {
text-align:center;
}

body:before {
content: url("header.png");
display:run-in;
}

kind of a creative ghettofix but it works.

[Major_Payne]

Resolution has nothing to do with it. It is the browser's working window size at any resolution that makes the difference. You can have the same resolution on a Desktop using a 22-inch screen as a 15-inch laptop, but the browser's window size will be different. 63% would be that much of whatever the container is.

Glad you got it working.