2 pièce(s) jointe(s)
Adapter le background sur mobile
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:
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:
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> |
Pièce jointe 508469
Pièce jointe 508471
