Как задать фону неполную ширину и при этом cover?

Question

[Антон Литвиненко]

Пришла пора глупых вопросов.
Нужно блоку первого экрана дать на фон картинку, которая будет занимать всегда 80% от ширины и 100% высоты. При этом быть как бы Сover, то есть не искажаться. С изображением img и оберткой для него без проблем, а с чистым бекграундом секции не выходит, уже и спеки почитал, где-то глаз замылен, прошу подсказки.
Похожее поведение получаю при правилах

background-size: cover;
background-position: 100px top;

но если заменить пиксели на проценты то работать перестает

Comments

[Andrey K.]

Может тогда проще через псевдоэлемент? Сделать before для секции абсолютом на всю высоту и 80% ширины, и z-index поставить такой, чтобы не перекрыл контент внутренний. И ему уже фон cover делать.

[Антон Литвиненко]

Andrey K., каким способом более удобным вы бы предложили передать бекграунд в псевдоэлемент из html? Фон устанавливается из админки. Я пока писал придумал как, но приятно всегда посоветоваться

[Andrey K.]

Антон Литвиненко, из админки уже не так лаконично, тут на ум приходит только тег style рядом. Но я бы тогда сделал обычным дивом с изображением внутри.

[Антон Литвиненко]

Andrey K., оно и было у меня дивом с изображением внутри. так как картинка не контентная а оформительская решено было уйти от тега img/
Моя первая идея была передать через data-bg="url(img/content/solutions-bg.png)" в псевдоелемент таким образом: content: attr(data-bg); Но, вывело строку. Собственно я пришел к тому же решению в тегах style, подожду, может кто подскажет что хитрое через background

<style>
	.entry-header::before {
		background-image: url(img/content/solutions-bg.png);
	}
</style>

[Andrey K.]

Антон Литвиненко, если затрагивать эту тему детальнее, то я наоборот ушёл от конструкции background к тегу picture с source и img внутри. И для img уже object-fit и object-position. На мой взгляд так проще из-за формата webp. Выбор формата изображения ложится на браузер клиента.

<picture>
    <source srcset="image.webp 1x, [e-mail] 2x" type="image/webp">
    <img src="image.png" srcset="image.png 1x, [e-mail] 2x" alt="">
</picture>

[RAX7]

Антон Литвиненко,

[Антон Литвиненко]

Andrey K., я смотрю с точки зрения семантики и доступности

[Антон Литвиненко]

RAX7, Ты как всегда даешь решения, недоступные простым смертным)
Про свойство inset я не слышал, походу свежак совсем, а последнее решение хитрое))
если хочешь, напиши в ответы, я поставлю галочку

[RAX7]

Антон Литвиненко, про inset я сам буквально вчера узнал отсюда https://youtu.be/xmrfj5qrXAw?t=40 =)

Answer 1

[RAX7]