ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изображение полного экрана под описание на CSS

Изображение полного экрана под описание на CSS

Отличное приложение для веб мастера на вывод описание на изображение, где будет заголовок под ссылкой и само описание на картинке стиля. Все это еще станет дополнять темно прозрачный элемент, где хорошо просматривается все знаки, а точнее для читабельности. Это можно выставить на отдельную страницу и в описание поставить ссылку на ее открытие, где безусловно дополнит сам обзор, где изначально читали.

Многие современные веб-дизайн начали применять большое фоновое изображение, которое охватывает всю ширину и высоту окна браузера. Содержимое веб-сайта помещается поверх этого полно экранного фонового изображения. Где будет фиксированным в своем положении, что когда пользователь прокручивает и также реагирует на это, так как картинка при прокрутке остается на месте, а темный каркас будет в движение, что подходит для просмотра на всех размерах устройства.

Приступаем к установке:

Фоновое изображение обычно помещается как background свойство html или body тег. Ниже мы добавили код CSS в body тег для установки полно экранного изображения.

HTML

Код

<div class="content">
<h1><a href="http://zornet.ru/" target="_blank">ZorNet.Ru: Создание сайта на uCoz</a></h1>
<p>Здесь ваше описание или первый заголовок</p>
<p>Продолжаем писать по теме.</p>
<p>Третий тип на описание.</p>
<p>Завершаем, где вы можете добавить, то колличество, которое требуется</p>
</div>

CSS

Код

body {
  background: url(http://zornet.ru/_fr/56/0236097.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  margin: 40px auto;
  background: rgba(22,22,22, 0.5);
  width: 100%;
  max-width: 960px;
  border-radius: 5px;
  padding-bottom: 31px;
}

h1, h1 a {
  min-height: 127px;
  width: 83%;
  max-width: 665px;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  color: #fff;
  padding-top: 75px;
}

p {
  width: 91%;
  max-width: 699px;
  text-align: left;
  margin: 0 auto;
  padding-bottom: 29px;
}

Как вы можете видеть довольно просто установить изображение в качестве фонового восприятие, где хорошо работать с адаптивным веб-дизайном, где можете просмотреть demo версию одного варианта.

Демонстрация:

21 Декабря 2017 Просмотров: 1477 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0