Картинка в качестве фона. Как сделать фиксированный фон

Здравствуйте друзья! Недавно я делал анализ своего блога с целью найти слабые места дизайна и пришел к выводу, что задний фон смотрится очень убого и никак не сочетается с основной цветовой гаммой сайта в целом.

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

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

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

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

О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: « » и « ».

Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта» , а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

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

1) PatternCooler

Один из самых крупных хранилищ подборки фонов. Здесь вы сможете отыскать паттерн различной фактуры, сами изменить параметры цвета, а также выбрать популярный из топ.

Посмотрите, что у меня получилось выбрать для себя:

2) Stripegenerator

Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

Мой результат работы:

3) BgPatterns

Очень интересный сервис по созданию онлайн фона. Вы можете выбрать различные рисунки (сердечки, звездочки, кружочки) и цветовую гамму создаваемого фона.

Посмотрите, что я подобрал себе:

4) Tartanmaker

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

Как поменять фон на сайтах HTML и PHP

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

Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

В основном большинство начинающих, да и продвинутых вебмастеров используют в качестве движка блога CMS WordPress, поэтому чтобы установить фон на сайт, необходимо закачать созданный выше паттерн к себе на в папку с картинками темы.

Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

/ httpdocs/ wp- content/ themes/ Prosumer/ images

/httpdocs/wp-content/themes/Prosumer/images

background: #FFFFFF url(images/fon-1.png) repeat;

Основные настройки:

— repeat - изображение будет повторяться как по вертикали, так и по горизонтали;
— repeat-x - повторение только по горизонтали;
— repeat-y - повторение только по вертикали;
— no-repeat – запрет на повторение.

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

Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.

Фон для сайта или отдельного блока

Поскольку для осуществления этой цели нам нужен css-файл, его нужно создать и подключить к html. Об этом написано в . После этого можно приступать к работе. Во-первых, вам нужно определиться с тем, чему вы хотите задать фон. Если всей странице в целом, то сделать это можно так:

Body{ Background-color: white; }

То есть мы обращаемся к тегу body , который представляет всю нашу страничку. Для задания цвета фона используется свойство background-color . Но что, если вам нужно задать в качестве фона рисунок, а не сплошной цвет? Тогда стоит написать так:

Body{ Background-image: url(путь к рисунку.расширение рисунка) }

Для наглядности я предлагаю рассмотреть все подробнее на примере. Для этого я буду использовать такую картинку:

Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.

И вот для него стили:

#ct{ Background-image: url(comp.png); width: 600px; height: 400px; }

Вот что у нас получилось:

Почему так? Дело в том, что по умолчанию браузер повторяет картинку столько раз, чтобы полностью заполнить блок. Иногда так и нужно, например, при использовании бесшовных орнаментов, но в нашем случае должна быть одна картинка. К счастью, этим можно очень легко управлять.

Повторение фона

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

Repeat-x – повторять только по горизонтали
Repeat-y – только по вертикали

Допишем в свойства нашему графическому фону:

Background-repeat: no-repeat;

Позиция

Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.

Давайте лучше посмотрим на примерах:

Background-position: top right;

Картинка переместиться в верхний правый край. Я дал блоку также желтый фон, чтобы были видны его края.

background-position: 50% 50%;

Изображение появилось ровно по центру в своем блоке. Да-да, такое тоже возможно благодаря процентной записи позиции.

background-position: 70% 20%;

Фон смещен на 70% по горизонтали, и на 20 по вертикали.

Разрешается также в пикселях задавать отрицательное значение позиции. Это допустимо делать, например, когда вы используете большую картинку-спрайт и нужно поставить в блок нужную часть этого спрайта.

Закрепление фона

Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию (scroll). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.

Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.

Сокращенная запись всего этого добра

Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:

Background: yellow url(comp.png) no-repeat 20% 100px;

Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).

Много фонов

А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку

Я назвал ее laptop.

И вот код для вставки мультифона:

Background: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; background-color: yellow;

Как видите, достаточно всего лишь поставить запятую после первого изображения и прописать настройки для второго. Сплошной цвет в этом случае лучше задать отдельно.

Таким же образом можно записать еще сколько угодно картинок, но не переусердствуйте – слишком много графики это не очень хорошо.

Вот на этом мне бы хотелось закончить эту статью. С фоном можно делать еще много других интересных вещей, о них постараюсь писать в будущем (а кое-что уже написал – например, ). Успешного вам изучения этого свойства.

Многие начинающие верстальщики, только вникающие в суть создания сайтов, часто задаются вопросом, как в html сделать фон картинкой. И если некоторые и могут разобраться с этой задачей, то все равно возникают проблемы во время растягивания изображения на всю ширину монитора. При этом хотелось бы, чтобы сайт одинаково отображался на всех браузерах, поэтому должно выполняться требование кроссбраузерности. Можно установить фон двумя способами: с помощью и CSS стиля. Каждый сам для себя выбирает наиболее оптимальный вариант. Конечно, CSS стиль гораздо удобнее, ведь его код хранится в отдельном файле и не занимает лишние колонки в основных тегах сайта, но прежде рассмотрим простой метод установки изображения на фон сайта.

Основные теги HTML для создания фона

Итак, переходим к вопросу, фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

Написать атрибутом тега.
Через CSS стиль в HTML коде.
Написать CSS стиль в отдельном файле.

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

Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= "Название_папки/Название_картинки.расширение")(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background="Images/Picture.jpg")… (/body).
Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body style="background: url("../Images/Picture.jpg")").
И третий способ записи производится в двух файлах. В документе с названием index.htm в записывается такая строчка: (head)(link rel="stylesheet" type="text/css" href="Путь_к CSS_файлу")(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg")}.

Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

background: url(Images/Picture.jpg")

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

Как сделать фиксированный фон

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg") fixed; или вместо нее добавить после точки с запятой отдельную строчку - position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

Работа с таблицей в HTML

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

Таблицы с картинкой вместо фона: HTML примеры

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

Кроссбраузерность сайта

Существует еще такое понятие, как кроссбраузерность веб-ресурса. Это означает, что страницы сайта будут одинаково правильно отображаться в разных типах и версиях браузеров. При этом нужно HTML код и CSS стиль подгонять под необходимые браузеры. Кроме того, в современное время развития смартфонов многие веб-разработчики стараются создать сайты, адаптированные и под мобильные версии и под компьютерный вид.

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо «заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

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

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

Цвет;
Фоновую картинку;
Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

Фон сайта #55D52B

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Фон сайта rgb(23,113,44)

Фон сайта green

Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

Как видно из кода, привязка изображения происходит через путь url , заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.

Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!

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

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

repeat-x – повторение фонового изображения по горизонтали;
repeat-y – по вертикали;
repeat – по обеим осям;
no-repeat – повторение запрещено.

Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:

Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

Ключевым словом (top , bottom , center, left, right) ;
Процентами – отсчет начинается от верхнего левого угла;
В единицах измерения (пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

scroll;

fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких «метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров.

Если Вам нужно оформить документ в текстовом редакторе Microsoft Word не просто правильно, но и красиво, тогда на заднем плане лучше использовать какой-нибудь рисунок. Его можно взять любой, но лучше, чтобы он соответствовал напечатанному тексту. Также это может быть логотип или название компании. Если поставить их за текстом, то это смотрится красивее, чем водяной знак или подложка, и привлекает больше внимания.

В статье мы рассмотрим данную тему, и научимся, как сделать картинку фоном в MS Word.

Добавляем рисунок через соответствующий пункт меню

Выбрать рисунок для страницы в Word 2007, 2010 и 2013 можно следующим образом. Откройте нужный документ и перейдите на вкладку «Разметка страницы» . Затем нажмите на кнопку «Цвет страницы» и выберите из меню .

Если у Вас установлен Word 2016, тогда в открытом документе перейдите на вкладку «Дизайн» , а дальше делайте все, как описано выше: «Цвет страницы» – «Способы заливки» .

Откроется небольшое диалоговое окно. В нем перейдите на вкладку «Рисунок» и нажмите на кнопку с таким же названием, которая находится под пустой областью посредине.

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

После того, как выберите картинку, нажмите «ОК» в соответствующем окне.

Плюс данного способа в том, что фон, который Вы выберите, применяется ко всем страницам в документе.

А минус – изображение должно быть подходящего размера. Как видите, в примере, виден только один пингвин. Соответственно, эту картинку мне нужно сохранить с другим размером через какой-нибудь редактор, например, Paint.

Делаем картинку фоном страницы

Давайте рассмотрим еще один способ, с помощью которого можно сделать нужный рисунок фоновым.

Откройте документ и переходите на вкладку . Затем нажимайте кнопку «Рисунок» , чтобы добавить его на страницу.

В следующем окошке найдите то, что подходит, на компьютере, выделите и нажмите «Вставить» .

После того, как картинка добавится, кликните по ней правой кнопкой мышки и выберите из контекстного меню «Обтекание текстом» – «За текстом» .

Теперь весь текст, который есть в документе отобразится перед картинкой. Чтобы выбранное изображение сделать фоном всего листа и убрать белые поля, его нужно растянуть. Для этого, кликните по картинке. По краям сразу появятся маркеры – точки по углам и по одной точке с каждой стороны. Используя данные маркеры, растяните рамку по ширине и высоте так, чтобы закрыть весь лист.

Вот так получилось у меня. Плюс способа в том, что самостоятельно можно выбрать, какая часть картинки отобразится на листе: целиком, или можно растянуть и сделать так, чтобы отображалась только определенная область.

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

Ваши документы, будут выглядеть интереснее, после того, как Вы в качестве фона страниц поставите подходящее изображение. Только помните, что на выбранном фоне не должен теряться текст, и он должен соответствовать тексту.

Оценить статью: