Header & Footer custom CSS question

berkley

11 years ago

Hi, I'm using following code for displaying a repeating image on header and footer:

body::before {
content: "";
background-image:url('smiley.png');
background-repeat:repeat-x;
height:40px;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

body::after {
content: "";
background-image:url('smiley.png');
background-repeat:repeat-x;
height:40px;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}

The images are showing fine on top and bottom. But for some reason the content of the body starts also on top: 0;. Or in other words: the height of 40px reaches into the body... Any tips? Thanks in advance, berkley