0

I have a coming soon web page with a background image. I want the image to crop left and right and scale to the viewport height automatically. Instead, it is tiling vertically.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>My Website</title>
</head>
<body>
    <h1>My Website</h1>
    <h2>Coming Soon</h2>
</body>
</html>

Here is the CSS:

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 100%;
}

body {
    background: url(starting-a-business.jpg) 50% 50%;
    background-size: cover;
}
  
h1 {
    color: white;
    text-align: center;
    font-family: "montserrat", sans-serif;
    font-size: 6vw;
    padding-top: 30vh;
    text-shadow: rgb(133, 170, 170) 2px 2px;
}

h2 {
    color: white;
    text-align: center;
    font-size: 5vw;
    text-shadow: rgb(133, 170, 170) 2px 2px;
}

Here is the desktop image appearing as I want it to:

enter image description here

Here is the mobile image with the unwanted tiling. I want the image to crop left and right keeping the image full height with the person in the center without any distortion.

enter image description here

Newbee
  • 173
  • 1
  • 8
  • 1
    Does this answer your question? [CSS background image to fit width, height should auto-scale in proportion](https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) – Justinas Mar 09 '21 at 20:17

2 Answers2

1

Try this :

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
giorgi tetunashvili
  • 21
  • 3
  • With this CSS the image is scaling to fit full width, and leaving white space at the bottom of the page. – Newbee Mar 09 '21 at 20:42
  • Adding this achieved the desired effect but now I have a small scroll bar on the right.body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; } body { background: url(starting-a-business.jpg) 50% 50%; background-repeat: no-repeat; background-position: center center; overflow-x: hidden; background-size: cover; } – Newbee Mar 09 '21 at 21:08
0

The below CSS produced the effect I was looking for. Thanks, everybody for your help.

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 100%;
}

body {
    background: url(starting-a-business.jpg) 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    background-size: cover;
}
Newbee
  • 173
  • 1
  • 8