[berkley]

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

[Sakin]

@berkley: Sorry I don’t understand what are you trying to do it. Can you explain it in reference to your site URL.

[berkley]

thanks for fast answer!
Sorry, site is not public yet and only available with admin login.

Check this link: https://www.dropbox.com/sh/3xwhxnz3zvauebf/Tifv83kzDM
It’s a screenshot with and without the code from the left upper corner of the page.

The 3 colored lines are actually just a png file that is repeated all over the screen width. I expected the code to work as it pushes everything else below the 3 colored lines. For some reason it’s just on top of the body.

[Sakin]

@berkley: Can you send me your png file and the design screenshot that you are trying to achieve. Show me the full screen design.

[berkley]

@Sakin:
I’ve uploaded some screens and pngs to the dropbox album from above. The “problem” isn’t really a problem on desktop. It’s a problem on mobile devices, because the header is below the colored lines.

[berkley]

Ok, figured out myself now.
“All” I needed to do was to add some additional space on top and bottom with the same height as the pngs…

For all with the same problem, here goes the code:

#page { margin-bottom: 40px; }
#page { margin-top: 40px; }

Thanks for helping out

[Sakin]

@berkley: Ok that’s great. Thanks 🙂

[Author]

Posts