Change image by CSS depending on the access device

Navigation
1

I have a rotating banner as per the code below. For now it only has 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 the mobile versions, the image of the banner is very large. How could I do that inside the CSS I include this image in desktop access and in mobile mode another image appears? I'm using Bootstrap 3.

    
asked by anonymous 12.02.2018 / 17:03

3 answers

4

1: The Viewport

Add the viewport within the head tag: 

<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.

    
12.02.2018 / 18:26
0

Try to add the width: 100%; height: auto properties to 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).

    
12.02.2018 / 18:13
0

You can solve this basically without CSS if you prefer. Using the This way for example: 

<figure>
  <picture>
    <source media="(min-width: 2000px)" srcset="suaimagem-grande.png" sizes="100vw"/>
    <source media="(min-width: 1500px)" srcset="suaimagem-pequena.png" sizes="100vw"/>
  <figure>
<picture>

Here is a practical example and note that when you display the Snippet in "Full Screen" the image will change. 

.item {
      background: url(http://placecage.com/600/200) no-repeat;
      background-size: cover;
      padding: 10px;
      position: relative;
      display: flex;
  }
  picture {
      margin: auto
  }
<figure class="item">
  <picture>
     <source srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/114/f-cross_256-128.png" media="(min-width:768px)" />
     <source srcset="https://cdn4.iconfinder.com/data/icons/icocentre-free-icons/137/f-check_256-128.png" media="(min-width:450px)" />
     <img src="http://placecage.com/300/300"alt="imagem de fundo do banner" />    
  </picture>
</figure>

Here is a practical example. link

I recommend reading this response Mobile First: Appear image only on the desktop

And from the W3C Git documentation: link

    
19.02.2018 / 23:34
Div Slider between images on Hover Best way to replace more than one character in php