Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

:before and :after pseudo elements on html tag is wonky in Chrome

I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly.

Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.

I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!

Here's my CSS:

html {
    background-image: url('images/template/html-bg.jpg');
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #0e0e0e;
    height: 100%;
    position: relative;
}

html:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?

like image 779
Gazillion Avatar asked Mar 20 '12 15:03

Gazillion


Video Answer


1 Answers

Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.

Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:

body:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

Depending on your layout, you may need to either keep your html rule or change it to body as well.

like image 114
BoltClock Avatar answered Nov 15 '22 16:11

BoltClock