Как сделать два разных задних фона на сайт для смартфонов и ПК?

Question

Всем привет, я новичок в сайтостроении, заканчиваю свой первый сайт, мне осталось только отобразить на главной странице фон с афишей открытия сайта, с ссылкой на бота в тг.

Заказчик скинул два фона, один для ПК 1920х1080, а второй для мобилок, не помню точное разрешение.

На пк все отобразил, но не знаю как отобразить второй фон только на смартах, надеюсь на вашу помощь, вот ссылки на обе картинки

http://img.uztor.pw/img/2020-08/15/dcmehk1fq4k2qrso4pw7shmv9.jpg http://img.uztor.pw/img/2020-08/14/b1z1f9foy9yc5ukmeokqsat5b.jpg

Мой код:

<html>
<head>
<title>
admin.promall.uz</title>
<style>
.bglink{
display:block;
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:0;
text-indent:-5000em;
}
.container{
position:relative;
z-index:10;
} 
</style>
</head>
<body style="background-image: url(http://img.uztor.pw/img/2020-08/14/b1z1f9foy9yc5ukmeokqsat5b.jpg)">
    <a class="bglink" href="https://t.me/ProMallBot"> </a>
<div class="container">
</div>
</body>
</html>

Answer 1

Для этого будет достаточно создать @media-правило, которое будет "говорить" браузеру какую картинку следует отображать отталкиваясь от ширины viewport'a:

body {
  background-image: url("http://img.uztor.pw/img/2020-08/14/b1z1f9foy9yc5ukmeokqsat5b.jpg")
}

.bglink {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: -5000em;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 600px) {
  body {
    background-image: url("http://img.uztor.pw/img/2020-08/15/dcmehk1fq4k2qrso4pw7shmv9.jpg")
  }
}

<a class="bglink" href="https://t.me/ProMallBot"></a>
<div class="container"></div>

Измените размер (max-width: 600px) на тот который Вам нужен.

БЛОГ НА HUSL

Как сделать два разных задних фона на сайт для смартфонов и ПК?

Ответы (1 шт):