CODEWITHSUNDEEP
htmlcss
Newbee
Newbee

Reputation: 173

Background Image in html and css

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

Upvotes: 0

Views: 62

Answers (2)

Newbee
Newbee

Reputation: 173

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

Upvotes: 0

Giorgi Tetunashvili
Giorgi Tetunashvili

Reputation: 21

Try this :

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

Upvotes: 1

Related Questions