background image in row

Hi,
I am using one lide in the Basel Slider on my home page at the top below the navigation. I need this image to be full width of my boxed layout without zooming in on the image so that the whole image fills the space. If I make the background and content stretch the image is zoomed in on and I need to show the whole image. I added margins to the width of -50px which works on desktop, it makes the image fill the width of the screen, but as soon as the browser window becomes smaller the image doesn’t reach the sides.
The screen shot attached shows the space appearing on the left and right as the screen becomes smaller.
What I need to know is how to use background images so they display at the size of the image without zooming in.

Attachments:

You must be logged in to view attached files.

Hi,

Could you please send us a link to your website where we can see this issue?

Kind Regards

Sorry, thought I had.

http://79.170.44.113/justwardrobedoors.co.uk/

Hello,

The nature of the background image is that it can be either covered (zoomed in) or contain https://gyazo.com/9a24719a1b19a4e8c5628a3e496a8613 with its real size, however as you see this image is big enough to cover the slider.

Best Regards

Hi,

My site is set to boxed 1200px and the image is 2000px wide.

Hi,

Try to remove custom margins from slider row add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.basel-slider-wrapper {
    margin-left: -30px;
		margin-right: -30px;
}

@media (max-width: 1200px) {
.basel-slider-wrapper {
    margin-left: calc((-100vw - -955px) / 2);
		margin-right: calc((-100vw - -955px) / 2);
}
}

@media (max-width: 991px) {
.basel-slider-wrapper {
    margin-left: calc((-100vw - -735px) / 2);
		margin-right: calc((-100vw - -735px) / 2);
}
}

@media (max-width: 768px) {
	.basel-slider-wrapper {
    margin-left: -15px;
    margin-right: -15px;
	}
}

Regards

Hello,

Your image is 2000 in width and 1112 in height. Slider height is 575px and width of the image is adapted accordingly

That is why when we set “contain” we see gaps on sides.

You have hardly any other ways. It is the nature of background image.

Best Regards

[Author]

Posts