CODEWITHSUNDEEP
htmlcsscss-filters
Jarzka
Jarzka

Reputation: 773

Making text-box background blurry with CSS

The whole problem is demostrated on this JSFiddle page I created: http://jsfiddle.net/r480pggf/4/

My purpose is to make the background of the black box blurry. The black box is supposed to contain text inside p tags.

I have almost solved the problem but for some reason if I use p tag inside the black box, it creates blurrness on top of the black box (might be a bit difficult to see, please look close at your monitor). If p tag is removed, everything works as expected, but I would like to feel free to use p tags inside the black box.

HTML

<div class="content-box">
    <div class="content-bg"></div>
    <div class="content">
        <p>Text with blurred background</p>
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
        <br>Text with blurred background
    </div>
</div>

CSS

body {
    background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    overflow: hidden;
}

.content-box {
    position: relative;
    width: 300px;
    overflow: hidden;
}

.content-bg {
    position: absolute;
    background-size: cover;
    background-image: url('http://7-themes.com/data_images/out/65/6995506-wood-textured-desktop-background.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-size: no-repeat fixed center center cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.content {
    border-radius: 10px;
    z-index: 100;
    background-color: black;
    opacity: 0.7;
    color: white;
}

JS

function updateBackground() {
    var contentBox = $(".content-box");
    var bg = $(".content-bg");
    bg.css("left", -(contentBox.offset().left));
    bg.css("top", -(contentBox.offset().top));
    bg.width($(window).width());
    bg.height($(window).height());
}

$(window).resize(function() {
    updateBackground();
});

updateBackground();

Upvotes: 0

Views: 6234

Answers (1)

Zimmi
Zimmi

Reputation: 1599

The blur outside at the top of the brown box comes from the margin of the first element, if it has some The p element has a top and bottom margin as default. You need to remove this margin with for example:

.content :first-child { margin-top: 0px }

fiddle

Edit:

It's a thing with the margins, and the collapsing of margins. See the MDN reference here. The relevant part is:

Parent and first/last child : If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, [...] then those margins collapse. The collapsed margin ends up outside the parent.

I've taken your example fiddle in the comment to make it show the difference with the border: fiddle.

For your problem, another solution could be to give a transparent border to your .content box: 

.content { border: solid 1px transparent; }

fiddle.

Upvotes: 1

Related Questions