background-size: не показывать всю картинку - PullRequest
Новая
       31

background-size: не показывать всю картинку

0 голосов
/ 24 мая 2018

Мне интересно, почему содержат такие вещи.Это мой HTML-код. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

Теперь это мой CSS-код: 

body {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}

Мой вопрос такой: почему не весь фоновый рисунок внутри тела?Почему изображение выходит за границы, как на этом рисунке в окне браузера:

https://i.stack.imgur.com/uDuzD.png

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

background-size: не содержать тег body *

Попробуйте это 

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>
<div>

</div>
</body>

</html>

и css 

    div {
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('img Url');
background-size: contain;   
background-repeat: no-repeat;
}
0 голосов
/ 24 мая 2018

Применение стилей к html вместо body решит эту проблему 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

Используйте html вместо: 

html {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}
0 голосов
/ 24 мая 2018

Попробуйте изменить на background-size:cover.Вам нужно будет добавить это свойство в div полной ширины внутри вашего тела.Вы не можете добавить его в тело 

div {
/* min-height: 100%;   */
width: 100%;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: cover;   
background-repeat: no-repeat;
}
...