Как сделать фон для страницы. Установка бесшовного фона в HTML

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

Делаем новый фон для сайтов

Для выполнения поставленной задачи, Вы можете воспользоваться одним из 4-ех способов:

• 1. Фон с одного цвета
• 2. Фон с текстуры
• 3. Фон с помощью градиента
• 4. Фон с большого изображения

Создаем фон с помощью одного цвета

Чтобы создать или изменить задний фон сайта, который состоит из одного цвета, необходимо перейти в файл style.css , в котором отыскать значение - body (оно отвечает за основное тело сайта). Теперь Вам необходимо прописать функцию background-color если ее не было и указать код цвета. В том случае, когда Вам необходимо создать задний фон для сайта белого цвета, то придется прописать следующий код:

background-color: #83C5E9 ; (синий фон, как на примере)

Вы сможете найти полный перечень цветов на сайте - (STM). Для изменения цвета, просто изменяйте значение после двоеточия и наслаждайтесь своими трудами.

Создание фона при помощи текстуры

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

background-color: #537759;

background-image: url(images/pattern.png);

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

Делаем фон с помощью градиента

Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y ). Такая возможность позволяет нам создать любой простой фон для сайта своими руками. Для этого необходимо создать градиент шириной в 1 мегапиксель (см. картинку ниже), сохранить его как изображение и загрузить на хостинг. После этого можно прописывать необходимый код, а именно:

background-color: #83C5E9;

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

background-repeat: repeat-x;

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

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

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

background-color: #000000;

background-image: url(images/название картинки.jpg);

background-position: center top;

background-repeat: no-repeat;

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

Изменяем фон на сайтах ucoz

Те способы создания фона для сайта могут быть использованы на разных системах управления сайтами, но не на сайтах - ucoz. Для того чтобы изменить фон для сайта ucoz, необходимо перейти в панель управления сайтом, зайти в «Управлением дизайном» , а потом в «Редактирование шаблонов» .

Теперь необходимо открыть Таблицу стилей (CSS), найти строчку «body» и параметр «background» . После этого нужно скопировать ссылку, вставить ее в интернет - браузер и вы получите доступ к картинке, которая была фоном.

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

Изменяем фон для сайта на HTML

Если вы хотите фон на html сайте сделать за счет изображения, то просто в коде впишите строчку:

А если хотите сделать фон сайта при помощи цвета, то строчка должна выглядеть вот так:

На этом наш рассказ завершается. Теперь вы знаете как сделать фон для сайта. Удачных проектов!

В HTML изображения вставляются с помощью тега img .
Тег img - пустой, он содержит атрибуты и у него нет закрывающего тега.

Для отображения изображения на странице используется атрибут src . Src появилось от source, что означает Источник. Значением атрибута src является url-адрес изображения.

Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html , в которой содержится index.html с указанным выше кодом и само изображение с названием image.jpg .

В таком случае при открытии index.html в браузере Вы увидите данное изображение. Если же оно у Вас где-либо в другом месте (на папку выше или ниже), то вместо этого у Вас отобразится либо белое поле, либо небольшой прямоугольник с красным крестиком (не удалось загрузить изображение).

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

Атрибуты тега img

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

src - адрес изображения
width - ширина изображения
height - высота изображения
title - подпись, которая высвечивается при наведении на изображение
alt - альтернативный текст. Нужен для поискового робота и индексации изображений
border - толщина границы изображения. 0 - нет границы, 1 - самая тонкая граница и тд

Адрес вставленного изображения (примеры)

Как правило, изображения хранятся не в той же папке, что и сам html-файл . Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес

Если файл лежит на папку выше, то так

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

Фоновое изображение в HTML

В качестве фонового изображения могут выступать файлы с расширениями gif , jpg , jpeg и png . В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background , в котором прописываем путь к изображению

Влад Мержевич

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

Фон на веб-странице

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

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое слово url . Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY , как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.

Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью свойства background и его значения repeat-y .

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

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

Добавление рисунка к тексту

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

Пример 4. Добавление рисунка

Заголовок

Основной текст

Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Сдвиг фона позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить свойство padding-left , за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка плюс желаемому отступу между изображением и текстом.

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

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

Если вы не знаете, что такое ХТМЛ , то это обобщенно можно назвать языком сайтов или набором правил по которым генерируются сайты.

Например вы видите картинку на сайте, когда в HTML коде страницы это может выглядеть так:

Установка сплошного цвета на фон страницы.

Для того, чтобы установить фон в виде сплошного цвета , нужно в тег добавить атрибут bgcolor.

< html >
< head >
< title >Заголовок страницы.

< body bgcolor = "#ffcc00" >

Вы можете данный код вставить в текстовый файл и сохранить с расширением.html. Далее открыть любым браузером и увидите результат.

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

Установка картинки на фон HTML страницы.

Для того, чтобы установить на фон изображение , можно использовать атрибут background в теге .

< html >
< head >
< title >Заголовок страницы.

< body background = "http://сайт/images/mlmsecret.jpg" >Привет. Этом моя первая страница.

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

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

Чтобы узнать прежний путь, необходимо на странице с картинкой, нажать по картинке правой кнопкой и кликнуть по «Копировать URL картинки.» таким образом вы увидите название картинки/фона. Затем вы можете просто заменить прежнюю картинку своей, используя то же название файла.

Это были простейшие основы по настройке фона в html , теперь самое интересное. 🙂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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