1

From MDN, the description for cover reads:

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

So why then is my background image coming out like this?

The CSS for it looks like this:

body {
    padding: 20px;
    background-color: #85b799;
    background-image: url(/beach.jpg);
    background-size: cover;
    text-align: center;
}

And the image is 3840x2160, which is bigger than my window size. Ergo, it would not need to "stretch" the image to fill the entire window. It should just crop the left and right sides heavily because the window is pretty narrow. But instead it has decided to repeat?

For completeness, here's the full code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <style>
        body {
            padding: 20px;
            background-color: #85b799;
            background-image: url(https://via.placeholder.com/3840x2160.png);
            background-size: cover;
            text-align: center;
        }
        .google-search {
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
            border-radius: 9999px;
            background-color: #fff;
            font: 16px arial,sans-serif;
            width: 50%;
            border: none;
            padding: 14px 22px;
            margin-bottom: 80px;
            outline: none;
        }
        .app-icon {
            margin: 10px;
        }
    </style>
</head>
<body>
    <form method="get" action="https://google.ca/search">
        <input class="google-search" type="text" placeholder="Search Google" name="q" autofocus>
    </form>
    <a class="app-icon" href="http://home:32400/web"><img src="/plex.png" width="128" height="128"/></a>
    <a class="app-icon" href="http://home:9000/minio"><img src="/minio.png" width="128" height="128"/></a>
</body>
</html>

You might have to click Full page and shrink your window to see the problem.

mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • 4
    adding `html{min-height:100%}` helps? – Temani Afif Oct 06 '19 at 19:30
  • add borders to body to understand what's going on. body background is cloned to html if you did not set any to html and vice versa . contents sets the height if none set. – G-Cyrillus Oct 06 '19 at 19:32
  • 1
    Haha..I hadn't considered the html/body wasn't taking up the full height of the window. You can post that as an answer and I'll show myself out. – mpen Oct 06 '19 at 19:32
  • Have you tried with `background-repeat: no-repeat`? – Oriol Grau Oct 06 '19 at 19:34
  • @OriolGrau Yeah, no-repeat causes it to not repeat :-) Bottom half will be filled with a solid color. – mpen Oct 06 '19 at 19:34
  • I am considering a duplicate where I am explaining this behavior. It's with an empty body and gradient but the same logic happen with an image and non-full height body – Temani Afif Oct 06 '19 at 19:38

0 Answers0