HTML & CSS - переполнение фонового изображения?

Question

Поэтому у меня есть div с другим div внутри него, помещенным в центр моей страницы, и я хочу, чтобы фон этого div был размером всего окна, но я хочу, чтобы он отображал только фон в div, а не за его пределами.

.boxblur {
    position:fixed;
    overflow:hidden;
    top:27%;
    left:25%;
    right:25%;
    bottom:45%;
    min-height:289px;
    max-height:289px;
    min-width:400px;
    font-size:33px;
    color:white;
    opacity:1;
    transition:6s all;
    -webkit-transition:6s all;
    }



.insideblur{
    position:fixed;
    display:block;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    transition:1s all;
    -webkit-transition:1s all;
    background-image: url('pics/back.jpg');
    background-size:cover;
    background-position:center center;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    }

У меня внутри размытие вложено внутри boxblur. Я пробовал довольно много разных вещей, и ничто не удержит размытие внутри коробки. за

Answer 1

Изменить

.insideblur{
position:absolute;
display:block;
top:0px;
bottom:0px;
left:0px;
right:0px;
transition:1s all;
-webkit-transition:1s all;
background-image: url('pics/back.jpg');
background-size:cover;
background-position:center center;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

Исправлено на исправлено не работает хорошо. если еще нет, поместите.insideBlur внутрь.boxBlur

вот так:

<div class = "boxBlur">
    <div class = "insideBlur"> 
       STUFF....
    </div>
</div>

Answer 2

Итак, вот что я хотел бы сделать:

Допустим, у вас есть div из idbackground-img например.(в данном случае фоном является изображение)

<div id="background-img">
</div>

В вашем файле CSS:

#background-img {
         background: url('yourimage.png') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

и тогда вы можете добавить любой стиль, который вы хотите. Надеюсь, это поможет.