Images overlapping website body border

[ginanero]

Hello!

I have tried to create this effect on my website: https://css-tricks.com/body-border/

Here is what I am dealing with: http://cargocollective.com/ginanero/Baton-Rouge – click on thumbnails and you can see the images are scrolling over the body border, not underneath. It is happening on all pages with scroll but this is the best visible example. It seems to only be happening with the top border and I’m at a loss as to how to fix this.

Here is my CSS and Javascript: http://codepen.io/anon/pen/kkBaAB

Can anyone out there help me? Thank you so much in advance.

[Atelierbram]

Great pictures! Have you tried z-index? Like:

body:before, body:after {
  /* stuff */
  z-index: 1;
}

To loose the scrollbars, you may want to look into losing the width and height attribute/value pairs on the img-tag in the HTML, and in the css have img { max-width: 100%}.

[ginanero]

I’m glad you like my pictures! Thank you!

Also, that body border worked a treat :) Thank you so much. I can’t seem to find the img tag in the HTML? Can you help me find it? I would like to remove those ugly scrollbars!

Gina

[Atelierbram]

Am not familiar with the backend of this hosting environment, so hopefully the Cargo support/knowledge base can help you out there; but also don’t hesitate asking again (for anything).

[Author]

Posts