Как сделать картинку фоном

Для оформления материалов вебмастера довольно часто используют фоновые изображения. Использование картинки в качестве фона для материала – не только возможность сделать страницу сайта узнаваемой. Картинка может быть просто элементом декора сайта, либо в какой-то мере представлять тему материала. В любом случае использование фонового изображения - хороший способ для реализации дизайнерский замыслов. В первой части статьи вы узнаете, как сделать картинку фоном в HTML, во второй части – как сделать картинку фоном в CSS.

 

Как сделать картинку фоном в HTML

Так как многие начинающие вебмастера или малознакомы или совершенно незнакомы с HTML и CSS, я на примере статьи покажу, как можно изменить фон материала. Стиль фона мы будем прописывать непосредственно в материале (в HTML-редакторе). Однако замечу, не смотря на то, что встроенные стили будут работать, старайтесь всё-таки работать по правилам, т.е. стили прописывать в соответствующих файлах CSS. Для начала разберём свойства, которые мы будем использовать для создания стиля фона.

 

Фон (background)

В CSS фон сайта определяет такое универсальное свойство, как background. Оно позволяет установить одновременно до пяти характеристик фона:

background-image – устанавливает фоновое изображение, в качестве значения используется путь к файлу (url(путь к файлу));

background-position – задаёт начальное положение изображения (left, center, right, top, bottom);

background-attachment – устанавливает, будет ли изображение прокручиваться вместе с документом или займёт фиксированное положение (fixed, scroll, local);

background-repeat – устанавливает, как будет повторяться изображение (repeat-x, repeat-y, space, round, no-repeat);

background-color – определяет цвет фона (цвет, transparent, inherit).

Теперь, когда у вас есть набор инструментов, и вы знаете возможности каждого из них, можно приступать к работе.

 

Пример. Допустим, нам необходимо создать равномерный узорный фон для статьи.

 

небольшая картинка для фона

1. Найдём в Интернете небольшую картинку (см. рис) и закачаем её на сервер, к примеру, в папку images. Таким образом, относительный адрес картинки у нас будет images/uzor.png:

background-image: url('/images/uzor.jpg');

2. Если не задано начальное положение картинки, по умолчанию картинка будет находиться в левом верхнем углу. Так как это нас вполне устраивает, мы не будем указывать с помощью background-position начальное положение картинки, но чтобы замостить узором весь фон, нам нужно указать, чтобы наша картинка повторялась (repeat):

background-repeat: repeat;

3. Дополнительно укажем, чтобы картинка прокучивалась вместе с документом (scroll):

background-attachment: scroll;

Теперь наши действия таковы - мы заключаем наш текст (или часть текста, если вы хотите, чтобы лишь часть текста была на фоне картинки), в контейнер (div). Элемент <div> служит для выделения фрагмента документа с целью изменения вида содержимого.

<div>…</div>

 и прописываем для него стиль (style):

<div style="background-image: url('/images/uzor.jpg');  background-repeat: repeat;  background-attachment: scroll; ">здесь расположен текст нашей статьи</div>

Сокращённая запись кода выглядит так:

<div style="background: url('/images/uzor.jpg') no-repeat scroll;"> здесь расположен текст нашей статьи</div>

В сокращённой записи мы указываем свойства background через пробел. Вы можете воспользоваться любой из этих двух записей.

 

Далее, открываем нашу статью в HTML редакторе и копируем код в нужное место статьи.

В Joomla входим в Менеджере материалов открываем статью для редактирования, в редакторе кликаем по значку HTML. Копируем код в нужное место статьи.

Страница без фона

 

 

 

 

 

 

 

 

И вот что получилось

Страница сайта с узорным фоном

 

 

 

 

 

 

 

 

 

 

 

Мы создали фон для страницы, но, почитайте вторую часть статьи, и вы убедитесь, что в CSS все это делается гораздо проще.

 

Как сделать картинку фоном в CSS

В первой части статьи мы встроили стиль прямо в статью. А ведь сделать картинку фоном в CSS не только правильнее, но и гораздо проще. Во-первых, уменьшится количество тегов в документе, по сравнению с вышеописанным методом. Во-вторых, мы присвоим нашему стилю класс, а это значит, что данный стиль мы сможем применять и для других страниц сайта.

Давайте тот стиль, который мы создавали в первой части статьи и напрямую встроили в HTML документ, перенесем в CSS, а затем добавим класс стиля к нашему тексту (или фрагменту текста).

1. В CSS, для придания элементу или группе элементов индивидуального стиля, отличного от основного стиля, прописанного в документе, служит класс (.class). Дадим имя классу .blokbg1. Открываем соответствующий файл с расширением .css, в котором прописаны стили и прописываем наш стиль:

.blokbg1 {
background-image: url('/images/uzor.jpg');
background-repeat: repeat;
background-attachment: scroll;
}

Или так:

div.blokbg1 {
background-image: url('/images/uzor.jpg');
background-repeat: repeat;
background-attachment: scroll;
}

В первом варианте наш стиль может быть применен к любому элементу, во втором – только к блокам div.

2. Теперь применим созданный класс "blokbg1" к элементу <div> в файле HTML. Открываем статью в исходном коде и добавим class="blokbg1":

<div class="blokbg1">здесь расположен текст нашей статьи</div>

Таким образом, мы сделали картинку фоном. Мы замостили весь фон узором с помощью маленькой картинки. Вы можете сделать фоном одну картинку и поместить её по центру, как в данной статье - картинка с летящей совой. Всё в ваших руках. Пробуйте и экспериментируйте. Далее читайте как сделать картинку ссылкой.

Комментарии   

 
0 #9 Niels 21.12.2016 15:20
Здравствуйте,

Комбинация в HTML здесь расположен текст нашей статьи работает. Но как вписать в этот код class="animate1 " для поддержания эффекта прозрачности изображения при чтении текста. В моих настройках CSS этот эффект прописан, однако в предложенную Вами конструкцию добавить его никак не получается. Каков выход?

Благодарю Вас.
 
 
0 #8 admin 12.12.2016 21:24
Цитирую Дмитрий Панафидин:
Прописал в код body { background-image: url(images/bg.jpg); /* Путь к фоновому изображению */ background-color: #c7b39b; /* Цвет фона */ } а толку ноль.

У вас не загружается картинка, так как неправильно указан ее адрес.
 
 
0 #7 Дмитрий Панафидин 12.12.2016 20:02
Прописал в код body { background-imag e: url(images/bg.j pg); /* Путь к фоновому изображению */ background-colo r: #c7b39b; /* Цвет фона */ } а толку ноль. Когда вместо body ставлю div? лишь тогда меняется фон на контенте , а мне нужен задний фон и ссылку на него поставить . Помогите!!!
 
 
0 #6 Вован 05.03.2016 18:01
Цитирую admin:
Андрей, попробуйте использовать следующие свойства:
1.background-size: 100% 100%; (фоновая картинка на все окно по ширине и высоте) или background-size: cover; (масштабирует фон)
2. background-position: 50% 100%; (фоновая картинка внизу по центру)

Спасибо огромное,статья оказалась самой полезной из тех что я нашёл,маленький недочёт,на мой взгляд,вот то что вы написали в комментариях про то как сделать на весь экран,лучше было бы в статье написать,я искал именно это!
 
 
0 #5 admin 30.07.2015 11:30
Андрей, попробуйте использовать следующие свойства:
1.background-size : 100% 100%; (фоновая картинка на все окно по ширине и высоте) или background-size : cover; (масштабирует фон)
2. background-posi tion: 50% 100%; (фоновая картинка внизу по центру)
 
 
0 #4 Andrey 29.07.2015 10:31
Здравствуйте. Спасибо за статью, все понятно написано.
Возникли вопросы:
1) Как сделать изображение одно, но что бы оно полностью отображалось в статье? К примеру у меня фоновое изображение 1024х768, если текста не много, то в высоту отобразится не все изображение, если смотреть на мониторе большего разрешения, то с права получается пустота и текст выходит за границы изображения (повторение/rep eat не нужно).
2) Как фоновое изображение прикрепить к нижнему краю, по центру статьи?
 
 
0 #3 нету 12.05.2015 13:06
сделай див и внутри него сслыку через тэг
и напиши в нем дисплэй блок типо так
 
 
0 #2 Юльча 24.10.2014 11:17
Цитирую Sergei:
с этим все понятно как ясный день,... как к фону привзать ссылку на другой сайт?

:o Зачем?
 
 
0 #1 Sergei 02.09.2014 19:28
с этим все понятно как ясный день,... как к фону привзать ссылку на другой сайт?
 

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.