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

Question

<div id="saveName" class="saveName" style="display: none;">
    <div class="saveName__wrapper">
        <h1 class="saveName__h1" id="saveNameH1">Чтобы сохранить результаты, введите ваше  имя:</h1>
    </div>
    <input id="saveNameInput" type="text" class="saveName__input" required maxlength="10">
    <br> 
    <p class="saveName__error-message" id="saveNameErrorMessage"></p>
    <button type="submit" class="saveName__saveButton" id="saveNameSaveButton"> Сохранить </button>
    <div class="saveName__timeToSave">
        <h1 class="saveName__timerPrinter"><span id="saveNameTimeWord"> Ваше время </span> - <span id="saveNameTimerPrinterMin">00</span>:<span id="saveNameTimerPrinterSec">00</span>.<span id="saveNameTimerPrinterMS">00</span></h1>
    </div>
</div>



CSS
.saveName{
  background-color: black; 
  background-image: url('public/example.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 8%;
  margin-left: 25%;
  margin-right: 25%; 
  width: 50%;
  text-align: center;

}

Мне нужно сделать так, чтобы этот деревянный блок полностью покрывал весь черный блок и блока не было видно. "background-size: cover;" не помогает

Answer 1

Это у меня получилось при помощи Волшебного выделения PAINT3D.

Берете свой оригинал делаете то же самое, потом на странице сайта, накладываете текст и нужные блоки поверх картинки, как вы уже это делали не с обрезанным изображением:)

Answer 2

.fon{
    width: 1000px;
    height: 400px;
    background-color: wheat;
}

.img{
  background-image: url('/1.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}


    <div class="fon">
        <div class="img">

        </div>
    </div>

Это после всех манипуляций с Paint3D

БЛОГ НА HUSL

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

Ответы (2 шт):