Почему не видно background?

Question

[Максим Головлёв]

Сначала вставлял изображениями в html, потом решил сделать бекграундом (речь идёт о блоке work1), но бекграунд, почему-то, не видно.

<div class="portfolio">
        
    <div class="work1"></div>
    <div class="work2"><img src="../htmlcss/images/work1.png"></div>
    <div class="work3"><img src="../htmlcss/images/work1.png"></div>
    <div class="work4"><img src="../htmlcss/images/work1.png"></div>
    <div class="work5"><img src="../htmlcss/images/work1.png"></div>
</div>

.work1 {
    background-image: url(../images/work1.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
}


.work1:hover {
    background-image: url(../images/work1hover.png);
    position: absolute;
    left: 0px;
}


.work2 {
    position: absolute;
    left: 205px;
}

.work3 {
    position: absolute;
    left: 410px;
}

.work4 {
    position: absolute;
    top: 160px;
    left: 103px;
}

.work5 {
    position: absolute;
    top: 160px;
    left: 308px;
}

Comments

[FeST1VaL]

Размеров нету у блока с картинкой, если вставлять через img, то там берется размер картинки.
А так же ты уверен что тебе нужен position: absolute?
Просто почему то мне кажется что ты пытаешься их выстроить в 2 строки в линию...
Ну и ты уверен что тебе надо менять картинку при ховере? может эффект который там на второй картинке можно сделать через css?

[Максим Головлёв]

Артем Будин, уже задал значения длины и ширины, вот так это выглядит (так и должно):
в неактивном состоянии используется пикча с заливкой, в ховере без, если подскажете мне как это реализовать через css - очень выручите

[Иван В]

Максим Головлёв,
Сделайте заливку с помощью CSS фильтра.
А при hover делайте filter: unset.

[FeST1VaL]

Максим Головлёв, а что ты подразумеваешь под заливкой? а насчет position: absolute, будешь потом париться если захочешь делать адаптив

[Максим Головлёв]

Артем Будин, а есть ещё варианты?

[Максим Головлёв]

Иван В, спасибо вам!

[FeST1VaL]

Максим Головлёв, Ну как вариант такой.

Answer 1

[Иван В]

Задайте .work1 ширину и высоту.