Search code examples
htmlcsspositionoverlay

Overlaying body over background image css

I want to have a computer screen as my background image and I want to have my body inside the screen of the computer. I got it to align on my larger screen, but on my smaller screen the size changes. I want to have the green cover the screen like this:

Large Screen

But it looks like this on my smaller display:

Smaller Screen

This is my css:

html {
  background-image: url(../images/Macbook\ Pro_auto_x2.png);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

body {
    background-color: yellowgreen;
    margin-top: 2.1%;
    margin-left: 16.7%;
    width: 66.65vw;
    height: 83.8vh;
}

and this is my html:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <title>Minimal Website</title>
</head>

   <body>  

      <h3>Hello</h3>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>

</html>
Solution

  • Use cover instead of contain

    background-size: cover;