Скрипты

grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...
repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Фоновое изображение на весь экран – CSS

Фоновое изображение на весь экран – CSS

Вам необходимо растянуть фоновое изображение на весь размер экрана, без отступов и белых полей. Для этого существует несколько способов как с средствами javascript так и с CSS. Приведу два примера растягивания фоновой картинки с помощью CSS.

 

Вариант первый эмулируем фоновое изображение, этот способ будет работать и в старых версиях браузеров незнающих CSS3.

Допустим HTML страница index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head> <body> <img id="background" src="/my_background.gif" /> <div id="body"> Здесь содержимое страницы </div> </body> </html>

И к нему стили css 

 html, body {
      margin: 0px;
      height: 100%;
    }
    #background {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    #body {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;

Вариант второй это свойства background-size появившийся в CSS3, ему задаются необходимые значения:

  • <величина> — ширина и высота фонового изображения в прямом виде
  • <процент> — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
  • cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.

И пример реализации.

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

 

 



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...