Change image by CSS depending on the access device

Asked

Viewed 86 times

1

I have a rotating banner according to the code below. For now it has only one image:

<section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active" style="background-image: url(images/slider/bg1.png)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-5 pull-right">
                            <div class="carousel-content" style="text-align: center">
                                <h2 class="animation animated-item-1"><span style="color: #FFE805">Aqui</span> <br><span>é o título</span></h2>
                                <div align="center">
                                <h3 class="animation animated-item-1"><span style="color: #FFE805">Aqui subtítulo</span></h3>
                            </div>
                            </div>
                        </div>                               
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

But in mobile versions, the banner image is too big. How could I make it so that inside the CSS I could include this image in desktop access and in mobile mode appear another image? I’m wearing the Bootstrap 3.

css

2 answers

3


1: The Viewport

Add to viewport within the tag head:

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

2: CSS @media Rule

<style type="text/css">
    @media screen and (max-width: 500px) {
        /* estilos para dispositivos/resoluções com largura até 500px */
        .foo {
            background-image: url(images/slider/bg1.png);
        }
    }
    @media screen and (min-width: 500px) and (max-width: 900px) {
        /* estilos para dispositivos/resoluções com largura entre 500px e 900px */
        .foo {
            background-image: url(images/slider/bg2.png);
        }
    }
</style>

Now just apply this to your layout.

  • Hello Lipespry. Right. I used your code, but when I take the style reference from that line <div class="item active" style="background-image: url(images/slider/bg1.png)">, leaving so: <div class="item active">, the image does not appear.

  • 1

    It probably does not appear because it has no content. The image displayed in this div is a background, not a content. Try to put something inside this div to try. Ex: &nbsp;

  • Perfect. I changed it .foo for #main-slider .carousel .item.active and it worked. Thank you very much.

0

Try to add the properties width: 100%; height: auto in the div whose image is set and see if it works.

It may also work using the class img-responsive (or img-fluid if you are using bootstrap in version 4).

  • Hello Cristiano. The problem was actually the image being differentiated in mobile versions. As CSS is not my strong suit, Lipespry’s response resolved. Thank you.

  • I understand, I’m glad everything worked out. #TMJ

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.