Как фото сделать фоном сайта


Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта





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

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

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


Источник: http://www.webadvisor.ru/kak-sdelat-kartinku-fonom.html





Как фото сделать фоном сайта фото


Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта

Как фото сделать фоном сайта

Далее: