Как сделать фоновое изображение моего сайта отзывчивым?

Question

Я новичок в разработке сайтов. Мне нужно сделать фоновый образ моего сайта отзывчивым. Как мне это сделать? Это также хорошо видно на мобильных телефонах. В настоящее время я показываю изображение в моем website следующим образом:

<img alt="Goodfoo.me" src="http://goodfoo.me/background.jpg" 
    id="full-screen-background-image" /> 
<style> 
#full-screen-background-image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
} 
</style> 

Answer 1

Если вы хотите, чтобы изображение занимать всю ширину экрана, просто установите width вместо min-width, like this:

#full-screen-background-image { 
    z-index: -999; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

Answer 2

без гарантии того, что это имеет смысл делать это таким образом, добавьте следующие строки в CSS:

img { 
    max-width: 100%; 
    height: auto; 
} 

Но имейте в помните, что если вы откроете страницу на действительно большой экран, как телевизор, он не будет работать, так как изображение не масштабируется. Если вы не возражаете против потери качества, вызванной масштабированием, просто удалите часть правила max-. Таким образом изображение всегда заполняет контейнер по ширине.

Обратите внимание, что это влияет на все изображения на странице.

Answer 3

Если вы хотите, чтобы фоновое изображение помещается на экране, вы можете использовать

background-image { 
    width: 100%; 
} 

в вашем css