Обложка всего модальная с изображением

Question

Я использую Materialize CSS. У меня модальный, и я хочу установить весь фон на изображение (поэтому, когда он открывается, похоже, что вы просто просматриваете изображение, красивое и большое с фоном веб-страницы, размытым). Проблема в том, что когда я это делаю, изображение повторяется, если модаль больше, чем он.

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

Мой модальный:

<div id="imageModal" class="modal"> 
    <div class="modal-content"> 

    </div> 
</div> 

CSS:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: "none"; 
    height: 50%; 
    width: 100%; 
} 

Answer 1

Вы были некоторые опечатка с фоновым-повторе. Попробуйте это:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    height: 50%; 
    width: 100%; 
} 

Кроме того, если вы используете CSS3, вы можете установить background-size свойство cover так что это поможет изменить размер изображения в соответствии с размером вашей покадрово. Как это:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

Answer 2

Привет добавить в своем стиле ...

background-repeat: no-repeat; 

просто осмотреть и проверить стиль, который и есть фон-повторить: ни один, который уже вычеркнуто becz нет стиля, как, что так что просто заменить выше один

Answer 3

попробовать это

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

Ссылка здесь

https://css-tricks.com/perfect-full-page-background-image/