Фоновый рисунок для сайта

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Фоновый рисунок для сайта

Сообщение Slash » Вт май 14, 2013 1:56 pm

В этом посте хочу рассказать, как поставить фоновый рисунок для своего проекта. За фоновое оформление картинкой отвечает элемент background, им мы и будем пользоваться... И так самый первый способ это поставить атрибут в тег <body>, например так:

Код: Выделить всё

<body background="img/head.jpg"> 

тут в кавычках указываем путь к картинки, которая должна стать фоном. Второй способ вставить между тегами <head></head> следующие:

Код: Выделить всё

<style>
  body { background: url(img/head.jpg); }
</style> 

Лучший, на мой взгляд способ это когда все стилевые элементы находятся на своем месте, то есть в файле стиля style.css, в нем код будет выглядеть так же: body { background: url(img/head.jpg); }, а сам файл стиля необходимо соединить с документом так:

Код: Выделить всё

<link rel="stylesheet" href="style.css" type="text/css" /> 

Как сделать, чтобы фон не повторялся?
Для того, что бы фон не повторялся используйте значение no-repeat, пример:

Код: Выделить всё

body { background: url(img/head.jpg) no-repeat; } 

Как растянуть фоновый рисунок на всю ширину окна?
Значение background-size предназначено для растягивания фонового изображения по всему размеру окна. Код выглядит так:

Код: Выделить всё

 body {
    background: url(img/head.jpg) no-repeat;
    background-size: 100%;
   }

Где брать фоны для сайта?
В интернете полно ресурсов с готовыми фоновыми рисунками, воспользоватся поиском, например Google, и получите миллионы ссылок на сайты с фонами. Но все же пару ссылок подкину: http://www.patterncooler.com и http://subtlepatterns.com/ - тут есть из чего выбирать!
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость