Как сделать чтобы блок не учитывался?

Question

[art style]

https://codepen.io/aptypkaa/pen/YzyyqpR

на фоне есть изображение, как сделать так чтобы его размеры не учитывались и оно просто болталось на фоне в заданных параметрах даже при уменьшении разрешения ?
интересует как это сделать именно отдельным блоком

Answer 1

[approximate solution]

body(или header) {
position: relative;
}
div.background-image {
position: absolute;
top: 0;
left:0;
bottom: 0;
right:0;
width: 100%;
height: 100%;
}

Что бы блок не мешал визуально верхним - z-indexпо необходимости.
Но по факту - это глупость, так как вы нарушаете заповеди веба - заповедь гласит -

фоновые картинки не надо лепить отдельным блоком, элементы украшения не нужно вставлять как картинки - они делаются псевдоэлементами after\before.

.
И далее по списку.

Comments

[art style]

а если у меня svg?

[approximate solution]

art style,
Работайте с svg как угодно, это векторная картинка, которая дополняет возможности, не убирая старых.

[art style]

approximate solution, я имею ввиду, тег svg? если мне нужен viewbox, width,height и тд... ?

[art style]

approximate solution, сделал как и предполагал, svg через absolute

Answer 2

[Loli E1ON]

https://codepen.io/E1ON/pen/KKddzqg

Comments

[Ankhena]

Пустой div лишний. bg fixed без разницы к чему применять, так что можно прямо к body.