ZorNet.Ru — сайт для вебмастера » HTML и CSS » Фоновая картинка для таблицы в HTML + CSS

Фоновая картинка для таблицы в HTML + CSS

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

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

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

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

Создание таблиц в HTML - фон таблицы или рамка таблицы

Реализация полноэкранного режима с помощью Div

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

HTML

Код

<div class="pedsamugds-emucasolas">
<h2>ZorNet - портал для вебмастера</h2>
<p>
Здесь находится описание по тематике или по материалу, что будет выставятся на отдельной странице.
</p>
</div>

CSS

Код

body
  {
  width: 100%;
  height: 100%;
  background-image:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/kitudam.jpg);
  background-size: cover;
  background-attachment:fixed;
  margin: 0;
  padding: 0;
  }

/* ========== DEMO STYLES ========== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
}

.pedsamugds-emucasolas {
  font-family: 'Open Sans';
  font-weight: 500;
  font-size: 14px;
  color: #2d2a2a;
  width: 56%;
  height: auto;
  margin: 10% auto;
  padding: 10px;
  background-color: #ded8d8;
  border: 2px solid #f3e8e8;
  border-radius: 7px;
  -webkit-box-shadow: 0px 0px 15px 0px #fbf5f5;
  box-shadow: 0px 0px 15px 0px #fdf7f7;
}

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

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

Здесь не сложно и быстро можете преобразовать полную ширины в полном экране, чтобы заполнить весь экран при загрузке страницы, точно так же, как заголовки.

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

27 Апреля 2019 Загрузок: 1 Просмотров: 1600 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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