HTML Background Auto-Resizing

Question

Я пытаюсь установить изображение в качестве фона и автоматически изменять размер и автоцентр при изменении размера окна. Прямо сейчас у меня есть автоматическое изменение размера и автоцентр, работающий идеально, но я не знаю, как сделать это своим фоновым изображением. Мне пришлось заменить все символы открытия и закрытия символом PLUS (+). Мой текущий код выглядит следующим образом:

<div style="text-align: center;"> 
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" /> 
</div> 

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

Answer 1

Добро пожаловать в StackOverflow-сообщества :)

Просто используйте background-image -свойство вместо <img> в тег.

<div style="background-image:url('amazing.jpg')"> 
    <!-- your text here --> 
</div> 

Для получения дополнительной информации See hereand here.

Примечание:

Если вы используете background-image вместо <img> вы не увидите ничего, если не дать <div> высоту, либо заполняя его с текстом и/или установка его height, например, 100px ,

Answer 2

Существует два способа сделать это, используя свойство img css background, а другое - с помощью тега HTML img.

https://jsfiddle.net/pdhgLap8/

В основном то, что вам нужно добавить, чтобы использовать фоновые изображения является

background-image: url("https://i.imgur.com/SebQr4d.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 

Это позволит установить фоновое изображение сделать это так, то только как большой, как DIV он находится в и сделайте так, чтобы он не повторял, чтобы заполнить div