img wont fit on mobile device

Question

i have a problem with my website. i want the background image to rescale corectly on mobile devices so i can see the full image on my mobile phone not just a part of it.

HTML :

<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
    <div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
        <div class="slide-container">
            <div class="slide-content text-center">
                <h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
                <blockquote>
                    <p ></p>
                    <p style="margin-top: 0px"></p>
                </blockquote>
            </div>
        </div>
    </div>
</div>

CSS

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
background-repeat: no-repeat;
background-size: contain;
background-position:center;
}

I want to see this on my phone, the full image:

https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45

not this

https://gyazo.com/f263a347517120a0ad368b7bbd2840ae

thanks in advance

Answer 1

So you have a couple of options, but you need to be aware of some constraints first:

The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).

In order to get the first result (100% wide, any height):

.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position:center;
}

And in order to get the second one (which is what you're already getting):

    .demo-1 .sl-slide .sl-slide-inner,
    .demo-2 .sl-slide .sl-slide-inner {
        background-repeat: no-repeat;
        background-size: contain OR [auto 100%];
        background-position:center;
    }

But, short of manipulating/changing the image out based on screen size with javascript , there isn't much more control than that.