Homepage banner

[replayer]

Hi,

 

I use my homepage banner with this setting (Resize the background image to make sure the image is fully visible inside of the block). Everything is fine on a large screen, but on a small screen like a laptop the image shifts. I tried with User CSS-class Enlarge image, Container by image width  etc... it doesn't work. what am I doing wrong here ?

 

large screen

 

 

 

small screen

 

[ab.support.serhii]

@replayer obviously you are using a large banner image and it won't fit on a small screen. According to the selected setting, it is reduced to be fully visible.
You should either load a smaller image or select a setting "Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges".

 

Simply put, the first option does this

http://i.abt.team/serhii/2025_01_15_3989557191.jpg

(part of the image will be cropped)

and the second option does that

http://i.abt.team/serhii/2025_01_15_3409723495.jpg

(there will be an empty space).

Otherwise, the image would be deformed, which is unacceptable.

[ab.support.serhii]

@replayer you should check out the section of the documentation that deals with banners. There you can also find the sizes of demo images.

https://docs.cs-cart.abt.team/en/abt__unitheme2.doc#p-1190

You can also always create a demo site for yourself and see a live example of how something is set up.

https://demos.abt.team/?lang_code=en

[replayer]

 

I try with this setting (Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges) and background-position: right;

 

 

 

without background-position: right; (Without this, the background will be cut in an unwanted place)