Discussion :

[Spiny]

Bonjour,

Je suis débutant en HTML, CSS et j'ai récemment acheté un thème qui à pour particularité d'avoir un "block-grid" en premier plan et en arrière plan background une image (Voir photo 1 & 2).
Mon problème est que l'image en background n'ai pas adapté pour les mobile et j'aimerais soit faire en sorte que l'image soit adapté au format mobile ou sinon d'avoir une autre image.

Voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  <!--CSS-->
  <link href="assets/css/icofont.min.css" rel="stylesheet">
  <link href="assets/css/linearicons.min.css" rel="stylesheet">
  <link href="assets/css/magnific-popup.min.css" rel="stylesheet">
  <link href="assets/css/animsition.min.css" rel="stylesheet">
  <link href="assets/css/swiper.min.css" rel="stylesheet">
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 <main>
    <div class="grid-block">
      <div class="grid-block__image grid-block__image grid-block__image_active" style="background-image: url('img/home-grid-image-1.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-3')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-3.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-4.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-5.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-6.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-7.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-8.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-9.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-10.jpg')"></div>
      <div class="grid-block__image" style="background-image: url('img/home-grid-image-11.jpg')"></div>
      <div class="grid-block__content container-fluid">
        <div class="row">
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item grid-block__item_active" href="#">
              <span class="grid-block__year">2019</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Architecture</span><span class="grid-block__title">Central Bank, Scotland</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2019</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Residential</span><span class="grid-block__title">The Beach House</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2018</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Architecture</span><span class="grid-block__title">Capri Ocean Museum</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2018</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Interior</span><span class="grid-block__title">Justin Burney Villa, NY</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2018</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Architecture</span><span class="grid-block__title">Art Museum, Poland</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2017</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Residential</span><span class="grid-block__title">David Villa, Denmark</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2017</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Architecture</span><span class="grid-block__title">Dustin Villa, Spain</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2016</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Interior</span><span class="grid-block__title">B6-No.5 House Interior</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2016</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Residential</span><span class="grid-block__title">Krisitina House, Germany</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2015</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Interior</span><span class="grid-block__title">Citizen Complex Interior</span></span>
            </a>
          </div>
          <div class="grid-block__column col-12 col-sm-6 col-lg-4 col-xl-3">
            <a class="grid-block__item" href="#">
              <span class="grid-block__year">2014</span>
              <span class="grid-block__item-content"><span class="grid-block__subtitle">Architecture</span><span class="grid-block__title">Local Finance Office</span></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </main>

[abdennour bouaicha]

salut,
même dans le destop ce code va créer des ennuis, pas seulement dans le mobile; car on charge l'image dans le div mais on fixe pas sa taille et son positionnement par rapport a se div:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="grid-block__image" style="background-image: url('img/home-grid-image-3');background-repeat: no-repeat;background-size: 100% 100%; background-position: 0 0;"></div>

applique ça sur le reste des images , le même code que j'ai rajouté.