Keep image aligned in form when resizing

Question

I have this image (the curve):

It shows part of the next section because the image form is narrower on the part and the width is over 1000px aprox.

My CSS for it is:

.img{
    width: 100%;
    height: auto;
}

It should always look like this:

How could I make that happen independently of viewport width?

Answer 1

The css property "background-position" can be very helpful with centering/placing an image in a certain position so it sizes better across responsive screens.

Have you tried displaying the image as a background image of a custom div which would have the properties you listed above, in a way similar to something like this:

.image-div {
    width: 100%;
    height: auto;
    background-image: url('my-image.jpg');
    background-position: center top;
}

Or something to that equivalent? I can't say exactly how to set background-position with your image as I'm unsure of its dimensions and where that curve lies in the image.

There some good info about the background-position property here.