CODEWITHSUNDEEP
htmlcssposition
Andrew Li
Andrew Li

Reputation: 57982

Weird Whitespace Above <img>

I've been working on a slider in JavaScript, and I've been adding images as backgrounds like so:

<img class="slide-bg" src="path/to/some/photo.jpg" />

CSS:

.slide-bg {
    position: absolute;
    filter: blur(3px);
    -webkit-filter: blur(3px) grayscale(20%);
    z-index: -3;
    display: block;
    margin: 0;
    padding: 0;
}

This code, for some reason, yields this result: enter image description here

Everything is great when I don't have position: absolute, but I need to have that so I can apply z-indexand have the slide-content actually fit on top of the image. Without position: absolute it yields this result: enter image description here

Upvotes: 0

Views: 73

Answers (1)

Shoeb Mirza
Shoeb Mirza

Reputation: 918

Add top:0; to your css

.slide-bg {
    position: absolute;
    filter: blur(3px);
    -webkit-filter: blur(3px) grayscale(20%);
    z-index: -3;
    display: block;
    margin: 0;
    padding: 0;
    top:0;
}

Upvotes: 2

Related Questions