Image is repeating itself in the mobile banner how do i stop it?

Question

I'm having a problem with the main baner image on my website.test website click here use right click inspect element then check the "toggle device toolbar" or use ctrl+shift+m ....

as you will see the main image is repeating itself in mobile mode:

the code:

html:

<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop image" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
                                        <div class="block-slideshow__slide-image block-slideshow__slide-image--mobile image" style="background-image: url('images/slides/slide-1-mobile.jpg')"></div>

tried using css adding this class .image and using this

.image{
    background-size: cover;
background-repeat:no-repeat;
}

but did not worked, the image looks ugly and blurry... all i want and need is my image is to look like the first image (stretched), but without repeating itself in the background....

if i remove "background-size: cover;" the stretched image appears in the center( this is what i want since i need that small image centered with a white background surrounding it, any factible approach for it?

edit: as i stated above i used this solution:

Prevent Background Repeating

but what i want and need is the image to look centered and small since occuppying and using background: cover looks very ugly and i dont know how to make the image fit correctly in the mobile screen without looking blurry and ugly!

how can i solve this? thank you!

score 0 · Accepted Answer · answered May 18 '21 at 16:00

The problem is not to do with background images repeating.

What has happened is that there is still a full size image in the div just above the start of the mobile-sized slideshow.

See the below code which shows you the position of the div which has an inline style giving it the larger background image.

<div class="owl-item active" style="width: 330px;">
  <a class="block-slideshow__slide" href="#">

THE NEXT LINE IS THE PROBLEM. THERE IS A BACKGROUND IMAGE STILL WHICH IS LARGER THAN THE MOBILE SLIDE SHOW'S HEIGHT AND IT IS STILL THERE WHEN YOU GO TO MOBILE SIZING

<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile" style="background-image: url('images/slides/slide-1-mobile.jpg');"></div>
<div class="block-slideshow__slide-content">
  <div class="block-slideshow__slide-title">Corporacion Venus C.A</div>
  <div class="block-slideshow__slide-text">Rif J-29419176-2</div>
  <div class="block-slideshow__slide-button"><span class="btn btn-primary btn-lg">Comprar ahora</span></div>
</div>

how do i solve this, a haworth? thank you! – className May 18 '21 at 17:56 — className, May 18 '21 at 17:56

Image is repeating itself in the mobile banner how do i stop it?

1 Answers1