Is html:before allowed?

[ambrooks]

In the site I’ve been designing recently, I use psuedo-elements on my tag. Here’s the CSS:

body {

position:relative; z-index:1;

width:896px; height:1600px; margin:0 auto; padding:0 48px 84px;

color:rgb(60,60,60)

background:#e2dfd6 url(../img/bg-grid.jpg) top center;

background:url(../img/bg-stain.png) center -400px no-repeat,

#e2dfd6 url(../img/bg-grid.jpg) repeat top center;}



html:before { /* Makes top-bar stretch to full width of viewport */

content:''; position:absolute; display:block; z-index:-1;

left:0; right:0; height:130px;

background:black url(../img/top-bg.jpg) repeat-x;}

The idea was since I’m using to center my page, I needed a way to have the background of my header stretch the entire width of the viewport. This works in all browsers except for the newest version of google chrome that came out today (v10.0.648.126 beta).

I haven’t seen anywhere that even mentions generated content on html, so I can’t figure out if this is just a new interpretation of the spec by google, or if it is a bug. I thought I’d ask here for advice. What do you guys think?

[fjorko]

Yeah – I would also like to know if this can be done….

[fjorko]

What if you gave your HTML element a repeating background (texture ). What if you wanted to overlay that with another image that is sort of transparent ( png ) in order to still see the html background but with the new semi-transparent image superimposed on top of the html background – think “Silverback multiple background” sort of scenario featured elsewhere on this site…

Can this be done by using the :before or :after pseudo selectors on the “html” tag ?, or do these pseudo selectors only work on classes, id’s and other standard html tags ( “p”, “a”, “ul” etc ) ?

Thanks

[ambrooks]

@Fourize That would work, and was my backup plan, but the idea was to reduce the number of non-semantic elements as much as possible.

@fjorko Although I haven’t tried what your saying, it seems to me that the problem I was having was related to positioning/sizing my pseudo elements. Pseudo elements should work on any element…

What I ended up doing is add a wrapper div and centering the wrapper instead of body. Then I was able to use this same technique using body:before and body:after without any problems. It just seems like doing anything “fancy” to html is too much of an edge case, and asking for bugs.

[Author]

Posts