3

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

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

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

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

Мой код:

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

.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;
}
<a class="bglink" href="https://t.me/ProMallBot"> </a>
<div class="container"></div>

1
  • 2
    смотри CSS @media screen 15 авг 2020 в 8:22

1 ответ 1

3

Для этого будет достаточно создать @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) на тот который Вам нужен.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.