Row Image Background: no cropping

---

Dear @mariusjopen,

on the home page of my site I use a fullscreen image (Row image Background + Cover option).

This image begins with a red semi-circle.
When my window is a certain width, the beginning of the image is cut off and this first red half-dot disappears.
My question: is it possible to force the image to always start at the top of my window?

That's what I tried to code:

html.objectfit.background-image img {
object-fit: unset!important;
width: 100%!important;
height: auto!important;
position: absolute!important;
left: 0!important;
top: 0!important;
}

With this code, the image starts at the top of my browser regardless of the size of my window.
Unfortunately under the picture is a large white banner (see picture below).
I tried to remove this space by changing the "height" setting but unfortunately it doesn't work.

Website url: https://seedbiosciences.com

Can you please help me?

Thanks in advance!

Ilina

Dear @Ilina-Catana
you could try

.background-image img {
object-fit: cover !important;
width: 100vw !important;
height: 100vh !important;
position: absolute !important;
left: 0px !important;
top: 0px !important;
}

Hope it works!

Best!

Marius

Dear @mariusjopen,

thanks a lot for your answer and your time!

I tried it. The page is now online: https://seedbiosciences.com/

When I reduce the size of my browser window, the image continues to be cropped.
As if it were centered and the window cut the top and bottom of the image when the size of the window is reduced.
Do you have any idea where this came from?

Thanks a lot for your help!

Best!

Ilina

Dear @Ilina-Catana
probably with CUSTOM CSS you could overwrite this.

The image background function is not developed for this exact case.

Best!

Marius

Dear @mariusjopen,

Alright, I'll keep trying :)

Thank you!

Ilina