background-size: contain not showing the whole picture

Question

I'm wondering why contain works like this. This is my HTML code.

<!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>

Now, this is my CSS code:

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

My question is this: why is not the whole background picture inside the body? Why the picture exceed the border like in this picture of browser window:

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

Claire · Answer 1 · 2018-05-24T20:18:36.417

0

Try changing to background-size:cover. You will need to add this property to a full-width div inside your body. You can not add it to the body

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

edited May 24 '18 at 20:18

answered May 24 '18 at 19:55

Claire

3,146
6
22
37

add the background to a full-width div inside your body. answer updated – Claire May 24 '18 at 20:17

score 0 · Answer 2 · answered May 24 '18 at 20:09

0

background-size: contain not work in body tag

Try this

<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>

and css

    div {
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('img Url');
background-size: contain;   
background-repeat: no-repeat;
}

answered May 24 '18 at 20:09

Salar

1
1

1

That is better. Just one more question. Why there is no space to the right side of the image? Image is 500 pixels wide and width of the div is 600 pixels. – Darko May 24 '18 at 20:43
because the property of background-size is contain – Salar May 25 '18 at 21:04
if you want the background image is displayed in its original size just change the background-size to auto – Salar May 25 '18 at 21:10
try background-size: 100% @Darko – sareek Sep 26 '20 at 08:42

score 0 · Accepted Answer · edited May 25 '18 at 08:16

Applying the styles to html instead of body will fix this problem

<!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>

Use html instead:

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

background-size: contain not showing the whole picture

3 Answers3