МОЯ идеальный фон изображения

Я в настоящее время страницы, как это:МОЯ идеальный фон изображения

body { 
 
    background-image: url("http://placehold.it/1920x1200"); 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <title>Cool Background Man</title> 
 
      <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
     </head> 
 
     <body> 
 
     </body> 
 
    </html>

Но мне нужно background-image, чтобы всегда быть самым маленьким, что это может быть при сохранении масштабирования (без растяжения). Это означает, что ВСЕ ВРЕМЯ либо width: 100vw, либо height: 100vh, в зависимости от размера экрана. Также НА ВСЕ ВРЕМЯ изображение заполнит экран. Это будет NEVER показать любое свободное пространство. Изображение должно также ALWAYS показать верхний правый угол, размер изображения должен корректироваться относительно этого.

Подводя итог, изображение будет всегда:

Есть либо width: 100vw или height: 100vh
Показать верхний правый угол, а размер будет регулировать относительно этого.
Заполните экран для любого размера экрана. Нет пробела на всех.
Никогда не растягивайте. Всегда сохраняйте масштабирование.

источник

2015-07-23 thesecretmaster

Может быть, JavaScript? – putvande

Убедитесь, что ваше изображение является .svg –

Background size - твой друг. Поддержка браузера very good at 95% according to caniuse.com

тело { background-image: url ("http://placehold.it/1920x1200"); мин-высота: 100vh; min-width: 100vw; переполнение: скрыто; }

body { 
 
    background-image: url("http://placehold.it/1920x1200"); 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: top right; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <title>Cool Background Man</title> 
 
      <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
     </head> 
 
     <body> 
 
     </body> 
 
    </html>

UPDATE: Один из способов сделать это, что позволяет использовать CSS фильтры, чтобы применить фоновое изображение псевдо контента и применить фильтры к этому:

body { 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
body:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-image: url("http://placehold.it/1920x1200"); 
 
    background-size: cover; 
 
    background-position: top right; 
 
    -webkit-filter: blur(5px); /* Or whatever filter you want */ 
 
    z-index: -1; /* Ensures it's behind the rest of the content */ 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Cool Background Man</title> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    Some content 
 
</body> 
 

 
</html>

источник

2015-07-23 19:11:32 Dre

. Как бы вы сделали это с помощью 'img' не всего тела, потому что мне нужно применить фильтры к изображению, и вы не можете сделать это для фонового изображения (я думаю) – thesecretmaster

ответ

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