Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 10. Все о фоне для сайта в CSS.

Автор: Андрей Краснокутский

Дата: 2009-04-29

Фон на сайте из картинки.

В третьем уроке "Работаем с фоном сайта" мы с Вами научились с помощью CSS задавать фон сайта просто цветом (в шестнадцатеричном значении) и задавать фон сайта с помощью фонового изображения. Напомню что задать фоновый цвет на Web-странице мы можем так:

Листинг 10.1.

body { background-color: #0С3445; }

Задать фоновое изображение на странице мы можем так:

Листинг 10.2.

body { background-image: url(bg.jpg); }

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

Как Вы помните фоновое изображение на web-странице просто повторяется (тиражируется) по горизонтали - Х и по вертикали - Y . Т.е. графический файлик bg.jpg размером 50х50 px , тиражируясь по горизонтали и вертикали равномерно закрывает всю web-страницу создавая эффект единого фона. Для того чтобы задать тиражирования только по какому то одному направлению или исключить тиражирование, применяется свойство background-repeat: с атрибутами:

  • repeat-y; - тиражировать только по вертикали;
  • repeat-x; - тиражировать только по горизонтали;
  • repeat-no; - не тиражировать.

Например мы хотим что бы изображение bg.jpg было растиражировано только по вертикали (сверху вниз) , напомню что по умолчанию тиражирование происходит из верхнего, левого угла, тогда мы создаем такой стиль:

Листинг 10.3.

body { background-image: url(bg.jpg);
background-repeat: repeat-y;
}

В результате наш квадратик 50х50 px растянется вдоль всей web-страницы с левой стороны.

Мы можем указать браузеру откуда тиражировать наше изображение, для этого служит свойство background-position: и его атрибуты:

  • top; - тиражировать сверху;
  • right; - тиражировать справа;
  • bottom; - тиражировать снизу;
  • left; - тиражировать слева.

Например нам нужно чтобы наш файлик bg.jpg тиражировался справа, сверху вниз, тогда код будет выглядеть так:

Листинг 10.4.

body { background-image: url(bg.jpg);
background-repeat: repeat-y;
background-position: top right;
}

C помощью этого же свойства background-position: мы можем указать конкретное место размещения графического файла на web-странице:

Листинг 10.5.

body { background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: 70px 300px;
}

Что мы здесь написали? Давайте "переведем на русский язык": файл bg.jpg , не повторять , разместить на web-странице в 70px от левого края и в 300px от верхнего края. Т.е. у нас будет висеть одиночная картинка в указанном месте.

Теперь раз уж мы разместили в произвольном месте картинку (графический файл) как Вы помните из преведущих наших уроков к этой картинке изображение начнет "прилипать" надо задать отступ от изображения. Это мы можем сделать с помощью уже знакомого нам свойства margin: используя при необходимости атрибуты: top; right; bottom; left; Вспомнить как используется свойство margin: можно здесь.

И последнее на сегодня свойство, которое мы изучим, относящееся к фоновым изображениям - это background-attachment: с атрибутами :

  • fixed; - изображение остается на месте;
  • scroll; - изображение движется вместе со страницей.

Как Вы наверное уже поняли с помощью свойства background-attachment: можно задать: используя атрибут fixed; при вертикальной прокрутке страницы изображение остается в том месте где его расположили, а при использовании атрибута scroll; - страница прокручивается, а изображение остается на месте , получается очень интересный эффект.

На сегодня это всё.

Удачи Вам.

 

Качайте Бесплатно и читайте также:

Практическое руководство "Как сделать красивую 3D обложку"

Как заработать в Интернете на продаже ссылок?

Сборник анекдотов в стиле Н. Фоменко

Notepad++ 5.1.4 Final + Portable Скачать бесплатно

eBook Edit Pro. Профессиональная программа для создания электронных книг.

 

Просмотров: 9051


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Роман
Дата: 2011-05-27

Как сделать так, чтобы изображение тиражировалось только по бокам?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT