Place a image inside a DIV in a responsive way

HTML-CSS
1

I’m currently doing the FCC challenges again, with the new rules.
In the “Responsive Web Design Projects - Build a Survey Form”, I’m trying to put an image inside a DIV. I moved this DIV to the middle of the screen using CSS GRID( grid-column: 3/11; grid-row: 2/12;), it’s a 12x12 grid, each row and column takes 1fr of space of the whole screen.
I need help to make the image fill the space of the div in a way I can see the scroll fully (the area I want to fill is the blue background one), I also neede help so when I resize the image, so it shrinks or enlarges responsively, currently when I change the screen size, part of the image disappears. I need this because I’ll try to place the form the area of the scroll. Currently only when the screen is in “middle” size, it works as I would like, with the scroll appearing fully.

Here’s the pen: https://codepen.io/JAEN_C/pen/GGZZPa

big
big1348×632 276 KB
medium
medium916×627 672 KB
small
small504×623 338 KB

2

your links is broken

3

Fixed. It was the semicolon in the end of it.

4

With an image in CSS as a background you can make adjustments with the background-size, background-position properties.

background-position: x y;
background-size: w h; (One value will be used for both dimensions)

If you change the background-size from cover to 100% it becomes more responsive.

5

Using the background tip worked well for me.

max-width:100%;
min-width:400px;
height:auto;
background-repeat:no-repeat;
background-size:100% 100%;

I’m almost finishing the challenge, thanks dude!

1 Like