Масштаб фона img на размер браузера пользователя

Question

Я прошел весь относительный ответ в stackoverflow, но не нашел идеальной подгонки. Я пытаюсь сделать .background img соответствующим размеру браузера пользователя независимо от того, как пользователь пытается изменить размер браузера. Некоторые относительные вопросы:

• How can get the div background image to scale to the page size?
• Fit website background image to screen size
• Stretch and scale a CSS image in the background - with CSS only

Я пытаюсь создать эффект, похожий на этот сайт (он упоминается на официальном сайте Bootstrap в качестве примера) : http://riot.design/en/. Попробуйте изменить размер браузера, и вы обнаружите, что фон img всегда масштабируется и подходит.

Есть ли хороший способ достичь этого эффекта?

Answer 1

вы можете попробовать что-то подобное в своем css.

html { 
    background: url(http://7-themes.com/data_images/out/60/6975736- 
android-background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Есть много вариантов, вы можете выбрать из .. просто старается следовать им здесь, что соответствует вашим потребностям. https://css-tricks.com/perfect-full-page-background-image/

Answer 2

litlitDM избили меня, пока я делал fiddle. Мой код немного отличается от его/ее. Убедитесь, что URL-адрес находится в одинарной или двойной кавычки. Использование резервных копий, предоставляемых litlitDM, всегда является хорошей идеей. Мне нравится использовать postition: absolute, но, как отмечалось ранее, css-трюки - отличный ресурс, так как есть много способов сделать это.