Forum Moderators: not2easy

Message Too Old, No Replies

centering image using :before

         

constelllations

5:27 am on Jul 22, 2010 (gmt 0)

10+ Year Member



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

5:47 am on Jul 22, 2010 (gmt 0)



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

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

constelllations

6:16 am on Jul 22, 2010 (gmt 0)

10+ Year Member



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

6:54 am on Jul 22, 2010 (gmt 0)

10+ Year Member



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

7:24 am on Jul 22, 2010 (gmt 0)



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.