https://codepen.io/babita__gurung/pen/jOqWdPv

1

Tell us what’s happening:
I am building a survey form. I am trying to put a background image on my webpage but the image gets stretched out and is unable to capture the entire image. I have tried using:

background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;

But it is not working. Help me, please?

Your code so far

<head>
    <style>
      h1#Title{
        color:black;
        text-align:center;
        font-family: aerial;
        font-weight: normal;
        padding-top:50px;
        margin-bottom:2px;
      }
      p#Description{
        color:black;
        text-align:center;
        font-size:20px;
        font-family: aerial;
      }
      body{
        background-image:url("https://www.tripsavvy.com/thmb/CyXuQJWabjrBCRBCVmP4TbBAOmA=/950x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/sunrise-camping--676019412-5b873a5a46e0fb0050f2b7e0.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center center;
        background-attachment:fixed;
      }
    </style>
    </head>


<h1 id="Title">freeCodeCamp SURVEY Form</h1>

<p id="Description"> Thankyou for taking the time to help us improve the platform.</p>
    
 <body>
   
    
</body>

Your browser information:

Challenge: Build a Survey Form

Link to the challenge:

2

Hey there!

An image has a resolution, width * height.

If the image resolution is equal to the box it lives in, you can cover without stretching.

Example:

  • image: 100px * 100px, ratio 1:1
  • box: 200px * 200px, ratio 1:1

You can double the width and the height without changing the ratio.

If the image resolution is different from the box it lives in and you try to cover it, the image gets cropped.

Example:

  • image: 100px * 100px, ratio 1:1
  • box: 200px * 100px, ratio 2:1

The ratio changes, so either you have to stretch the image or cut off content. cover cuts off.

cover: 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.