Как установить фон

 

Свойства background-image позволяет поместить изображение позади любого HTML-элемента. Это может быть вся страница или ее часть.

По умолчанию фоновое изображение повторяется, заполняя весь блок.
Путь к изображению следует после букв url и помещается в круглые скобки и кавычки.

body {
background-image: url («images/tulip.gif»);
background-repeat: no-repeat;
background-attachment: fixed;
color: #665544;
padding: 20px;}

 

Фоновое изображение (Element)

<!DOCTYPE html>
<html>
<head>
<title>Фоновое изображение (Element)</title>
<style type="text/css">
body {
color: #665544;
padding: 20px;}
p {
background-image: url("images/pattern.gif");
color: white;
padding: 20px;}
</style>
</head>
<body>
<h1>Инструкция по посеву семян</h1>
<h2>Магнолия</h2>
<p><b><i>Магнолия крупноцветковая</i></b>, также известная как <b>Южная магнолия</b>, — это вид цветковых растений, входящий в род Магнолия семейства Магнолиевые, произрастающих в юго-восточных штатах США от Вирджинии до центральной Флориды и восточного Техаса и Оклахомы. Это достигающие в высоту 27.5 метров вечнозеленые деревья с крупными темно-зелеными листями и большими белыми благоухающими цветами. Эти растения выращиваются по всему миру в коммерческих целях. Твердая и тяжелая древесина используется для изготовления мебели.</p>
<h2>Лютик</h2>
<p><b><i>Лютик азиатский</i></b> является одним из видов лютиков, произрастающих в восточном Средиземноморье, в юго-западной Азии, юго-восточной Европе (Крит, Карпатос и Родос) и северо-восточной Африке. Это травянистое многолетнее растение с простыми или разветвленными стеблями достигает 45 см в высоту. Трехлопастные прикорневые листья сменяются рассеченными листьями. Как и стебли, листья покрыты пушком. Цветы достигают 3-5 см в диаметре. На одном стебле может расти от одного до нескольких цветов от красного до розового, желтого или белого цвета.</p>
<h2>Тюльпан</h2>
<p><b><i>Тюльпан Геснера</i></b> — это вид растений семейства Лилейные. Этот вид имеет неопределенное происхождение, вероятно, азиатское, однако прижился в юго-западной Европе. Многие из выращиваемых видов и подвидов тюльпана происходят от Тюльпана Геснера. Цветы и луковицы могут вызвать дерматит из-за аллергена, тулипозида А, хотя луковицы можно употреблять в пищу. Душистые цветы появляются в апреле и мае. Луковицы чрезвычайно устойчивы к морозу и способны выдерживать очень низкие температуры. Период низкой температуры необходим для нормального роста и цветения. Луковицы можно сушить, измельчать и добавлять в злаки или муку.</p>
</body>
</html>

 

Повторение фонового изображения

Свойства background-repeat может принимать четыре значения.

body {
background-image: url("images/header.gif");
background-repeat: repeat-x;
color: #665544;
padding: 20px;}
h1 {
color: white;}

 

Блокировка фонового изображения

body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-attachment: fixed;
color: #665544;
padding: 20px;}

 

Положение фонового изображения

body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-position: center top;
color: #665544;
padding: 20px;}

 

Положение фонового изображения (Процентное значение)

body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
color: #665544;
padding: 20px;}

 

Стенографическое свойство для фонового изображения

body {
background: #ffffff url("images/tulip.gif") no-repeat top right;
color: #665544;
padding: 20px;}

 

Изображения-ролловеры и спрайты

a.button {
height: 36px;
background-image: url("images/button-sprite.jpg");
text-indent: -9999px;
display: inline-block;}
a#add-to-basket {
width: 174px;
background-position: 0px 0px;}
a#framing-options {
width: 210px;
background-position: -175px 0px;}
a#add-to-basket:hover {
background-position: 0px -40px;}
a#framing-options:hover {
background-position: -175px -40px;}
a#add-to-basket:active {
background-position: 0px -80px;}
a#framing-options:active {
background-position: -175px -80px;}
Понравилась статья? Поделиться с друзьями:
Блог  Измайлова Павла
Комментариев: 1
  1. Измайлов Павел (автор)

    я встречал людей кто не знал как добавить картинку бордюр форму

    картинки размер теперь всё здесь . :idea:

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: