2015-12-10 4 views
-1

Все:Динамическое масштабирование фонового изображения

Я довольно новичок в фоне CSS. Интересно, есть ли способ изменить размер фонового изображения, чтобы он всегда заполнял видовое окно, насколько это возможно, только с помощью CSS.

Правила есть:

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

<html> 
<head> 
    <title>BLURRING IMG</title> 
    <style type="text/css"> 
     html, body { 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      padding:0px; 
      margin:0px; 
     } 
     body { 
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ferns-unsplash.jpg"); 
      background-position: fixed; 
      background-size: 100%, cover; 
     } 
    </style> 
</head> 
<body> 
</body> 
</html> 

И я также хочу знать чем разница между:

background-size: auto auto, cover; 

и

background-size: cover; 

Благодаря

+0

'background-size: cover'? – Andrew

+0

@Adrew Да, Йоханнес тоже это помогает. Я указываю размер фона: 100%, обложка; поэтому он не работает, но я не знаю почему? – Kuan

+0

Просто выведите 'background-size: 100%, cover;' НЕПРАВИЛЬНО! 'cover' нельзя смешивать с% или другими значениями. Специально не используя разделение запятой >>> **, если вы используете только одно фоновое изображение **. –

ответ

2

background-size: cover и background-position: fixed

+0

Спасибо, я думаю, я пробовал это, но он оставит пустое пространство, не могли бы вы дать мне Fiddle или codepen для сравнения? – Kuan

+0

Я хотел бы получить более подробный ответ, что-то вроде объяснения, почему эта работа или совместимость с браузерами. –

+0

@ Kuan, не могли бы вы предоставить скрипку, где это не сработает? –

Смежные вопросы