Скрипты

timeloto-скрипт-моментальной-лотереи Оригинальный скрипт TimeLoto с качественным дизайном, тремя соц. системами для входа, встроено звуковое оповещение при выиграше. Выплаты на:...
vcity-браузерная-игра vCity - это браузерная онлайн-игра, которая разработана с помощью новейших веб-технологий. vCity - это многофункциональный игровой скрипт, который...
php-pro-bid-v7-8-магазин-аукцион PHP Pro Bid является первым продуктом на рынке, который включает всестороннюю поддержку как онлайн-аукционов, так и электронной коммерции. Если Вам...

Для 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 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...