Сайт

Код для фона сайта html: Как добавить фоновый рисунок на веб-страницу?

28.03.2021

Содержание

Как поменять фон страницы сайта ~ Как изображение сделать фоном

Как поменять фон страницы на сайте? Обычно этот вопрос возникает перед новичками, которые создали свой ресурс недавно или занимаются этим в настоящее время. Это первое, с чего начинается улучшение или смена дизайна сайта. Тем более, если вы скачали и установили бесплатный стандартный шаблон, поменять его дизайн просто необходимо. Так как этот шаблон будет установлен на многих других ресурсах, а поисковикам подавай уникальность.
Поменять фон страницы совсем не сложно, после прочтения этой статьи, процедура замены фона не займет много времени.
Фоном сайта может быть просто определенный цвет, а может быть и рисунок.
Прописывается фон в файле style.css, который расположен в папке вашей темы. В вордпресс например он будет лежать в следующей директории: public_html или httpdocs (в зависимости от того, на каком хостинге находится ресурс)/wp-content/themes/ваша тема/style.css. Обычно в начале этого файла расположен контейнер «body». Ищите в нем значение «background», именно оно определяет фон.

Фоном может быть просто цвет.

В «background» может быть прописан так, например красный:

body { ........ background: #ff6633; .......}

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

Фоном может быть и рисунок.

Тогда он прописывается следующим образом:

body {
background: url(images/my_image.jpg) no-repeat;
}

где: images/my_image.jpg – путь к файлу изображения.
no-repeat – указывает на то, что изображение не повторяется. Может быть так же: repeat – повторяется по оси X – горизонтально, и по оси Y – вертикально и заполняет фон страницы;
repeat-x – будет повторяться только по горизонтали;
repeat-y – только по вертикали;
Зачем нужно повторять фоновый рисунок, спросите вы. А например для того, чтобы замостить фон каким-нибудь узором.


Чтобы поменять фон страницы на свое изображение, закиньте файл изображение к себе на хостинг в папку с изображениями вашей темы, обычно папка images и пропишите свой путь к файлу в параметре background.
Параметр background позволяет прописывать 5 атрибутов стилей и не только для фона, но и для других элементов страницы.
background-attachment, background-color, background-image, background-position, background-repeat
Эти свойства можно прописать в CSS и раздельно.

background-attachment: : fixed: // или scroll - прокручивать или нет фоновое изображение
background-color: #ff6633; // цвет фона страницы
background-image: url(images/my_image.jpg) no-repeat; //изображение
background-position: right bottom; // положение фона
background-repeat: no-repeat; //повторение картинки

Положение фона background-position может быть:
top left = left top = 0% 0% (в левом верхнем углу)

top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
center bottom =bottom center = bottom =   50% 100% (по центру внизу)
right bottom = bottom right = 100% 100% (в правом нижнем углу)

С помощью всех этих свойств можно сделать и такой фон:

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

Как сделать большой фон для сайта через CSS

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

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

 

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

 

 

Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).

Пример 1.

Самый простой способ избежать этой ошибки – сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:

 

 

Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста – вы «прижимаете» изображение фона к верху и центрируете его по центру.

 

 

Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:

body { padding: 0; margin: 0; background: #f8f7e5 url(изображение.jpg) no-repeat center top; width: 100%; display: table;}

Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).

 

 

 

 

Пример 2. Двойные изображения

 

В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.

 

 

 

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

 

 

 

 

Пример 3. Небесный фон.

 

Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV – демо верстки можно глянуть здесь.

 

 

 

 

Кстати, данный пример можно реализовать и без DIV – смотрите код на демо странице2.

 

Внимание! Скачать все примеры можно здесь (зеркало).

Данный пост является переводом статьи – How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.

http://design-mania.ru

Как сделать большой фон для сайта через CSS — Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.

5 сайтов для привлекательных анимированных фонов Tumblr

Что является более привлекательным для вашего Tumblr

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

Вот пять веб-сайтов, где вы можете найти идеальный анимированный фон, подходящий для вашей страницы Tumblr.

, Кроме того, мы расскажем вам, как установить новый фон или тему Tumblr.

Giphy

Giphy — отличный ресурс для перемещения фонов Tumblr с огромным выбором GIF-файлов. На этом сайте есть все, что вы можете себе представить — от спорта до жутких сцен и снежинок.

Когда вы выбираете фон, у вас есть опции на вкладке «Дополнительно» для ссылки Giphy, видео HTML5 или загрузки GIF. Для того, чтобы иметь подходящую страницу Twitter, вы также можете загрузить изображение прямо в Twitter. Для одного из самых больших анимированных фонов Tumblr вам поможет Giphy.

SnazzySpace

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

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

Если вы решите, что поделиться страницей с вами не проблема, просто нажмите Facebook или Google+, и тогда вы увидите HTML-код для фона. Вы также можете проверить предварительный просмотр фона, чтобы увидеть, как они выглядят при применении.

Dazzle Junction

Dazzle Junction имеет 12 страниц мигающих фонов Tumblr, по пять на страницу. С розовыми символами мира, бьющимися сердцами и даже логотипом Шанель, сайт больше ориентирован на мягкий и тонкий фон.

С тремя различными вариантами, вы можете получить фон плюс тему

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

Блеск Радости

Glitter Joy также предлагает 10 анимированных фонов Tumblr с HTML и CSS для Twitter. От синей готики или черепов до великолепных фиолетовых коньков или цветов, есть несколько вариантов.

Как только вы выберете фон, вы увидите ссылку специально для Tumblr, которая приведет вас на страницу с инструкциями. Вы можете скопировать HTML-код в буфер обмена или загрузить фоновое изображение напрямую.

ThemesLtd.

ThemesLtd. предоставляет фоны для Tumblr, Facebook, Instagram и многое другое. Сайт также предлагает полные темы

и генератор для вас, чтобы создать свою собственную тему Tumblr

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

С Губкой Бобом Квадратные Штаны, танцоры и узоры, есть несколько классных фонов. Когда вы увидите понравившийся вам файл, выберите его, чтобы получить инструкции, содержащие код, который вы можете скопировать в буфер обмена, или возможность напрямую загрузить фон. ThemesLtd. Загрузка занимает некоторое время, особенно после поиска, но все же стоит посмотреть.

Добавление вашего фона в Tumblr

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

Сначала войдите в свою учетную запись Tumblr и в верхней части навигации выберите Мой аккаунт > Изменить внешний вид. На следующей странице прокрутите вниз и выберите

Редактировать тему.

Вставка HTML-кода

Если вы решили вставить HTML-код для фона, обратите внимание на местоположение кода на веб-сайте, где вы получили фон. Затем в Tumblr выберите Редактировать HTML от Редактировать тему меню.

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

Загрузка изображения

Если вы решили сохранить фоновое изображение на локальном диске и загрузить его на Tumblr, это тоже легко. в Редактировать тему выберите значок рядом с

Фон под Опции темы.

Когда откроется окно, найдите изображение на вашем компьютере и нажмите открыто. Затем фон встанет на место и вы выберете Сохранить.

Вам нравятся анимированные фоны Tumblr?

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

стр. Но они не для всех.

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

Как установить цвет фона с помощью HTML и CSS

    Фрагменты
  1. HTML
  2. Как установить цвет фона с помощью HTML и CSS

Первое, что вы должны знать, это то, что существуют разные типы HTML цвета, такие как шестнадцатеричные коды цветов, названия цветов HTML, значения RGB и RGBa, цвета HSL и т. д. Чтобы выбрать предпочтительный цвет, используйте наши Инструменты цвета.

В этом фрагменте вы можете найти множество различных способов добавления цвета фона.Начнем с самого простого.

Добавьте атрибут стиля к элементу

Вы можете установить цвет фона для HTML-документа, добавив style = "background-color:" к элементу .

Пример установки цвета фона с помощью атрибута style: ¶

Результат

Какой-то заголовок

Какой-то абзац, например.

Добавьте свойство CSS background-color к элементу

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

Пример установки цвета фона с помощью свойства CSS background-color: ¶

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

Пример добавления цвета фона к определенным элементам: ¶

 
Заголовок документа 

Заголовок на зеленом фоне.

Какой-то абзац с синим фоном.

Попробуйте сами »

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

. Мы указываем значение RGB для

, HSL для

и значение RGBa для элемента .

Пример установки цветов фона с разными цветовыми типами: ¶

 
Наименование документа
     

Заголовок на зеленом фоне.

Какой-то абзац с синим фоном.

Некоторый абзац для
Попробуйте сами »

Создание фона с градиентами¶

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

Существует два типа градиентного фона: linear-gradient и radial-gradient .

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

Пример установки фона с линейным градиентом: ¶

В данном примере показан линейный градиент, который начинается слева. Он начинается с синего и переходит в зеленый. Измените его в соответствии с вашими требованиями.

На фоне с радиальным градиентом начальная точка определяется его центром.

Пример установки фона с радиальным градиентом: ¶

Вы также можете настроить процентное соотношение цветов следующим образом: (цвет1 30%, цвет2 50%, цвет3 20%).

Создать изменяющийся фон¶

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

Пример создания изменяющегося фона: ¶

В процентах указывается длина анимации, указанная в «смене цвета» (например,20 с).

Вы можете изменить время и цвета для достижения желаемого результата.


Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Начиная с HTML + CSS

Начиная с HTML + CSS

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

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

В конце урока вы создадите HTML-файл, выглядит так:

Итоговая HTML-страница с цветами и макетом, все сделано с помощью CSS.

Обратите внимание, я не утверждаю, что это красиво ☺

Разделы, которые похоже, это необязательно. Они содержат дополнительные объяснение кодов HTML и CSS в примере. В «тревога!» знак в начале указывает, что это больше расширенный материал, чем остальной текст.

Шаг 1: написание HTML

Для этого урока я предлагаю вам использовать только самые простые из инструменты. Например, Блокнот (в Windows), TextEdit (в Mac) или KEdit. (под KDE) подойдет. Как только вы поймете принципы, вы сможете хотите перейти на более продвинутые инструменты или даже на коммерческие программы, например Style Master, Dreamweaver или GoLive.Но для вашего самого первого Таблица стилей CSS, хорошо не отвлекаться на слишком много продвинутых Особенности.

Не используйте текстовый процессор, например Microsoft Word или OpenOffice. Обычно они создают файлы, которые веб-браузер не может прочитать. Для HTML и CSS, нам нужны простые текстовые файлы.

Шаг 1: откройте текстовый редактор (Блокнот, TextEdit, KEdit, или как вам больше нравится), начните с пустого окна и введите следующий:



   Моя первая стилизованная страница 








Моя первая стилизованная страница

Добро пожаловать на мою стилизованную страницу!

В нем отсутствуют изображения, но, по крайней мере, в нем есть стиль. И на нем есть ссылки, даже если они не идут где угодно & hellip;

Здесь должно быть больше, но я не знаю что еще. <адрес> Сделано 5 апреля 2004 г.
сам.

На самом деле вам не нужно вводить его: вы можете скопировать и вставить его из эту веб-страницу в редактор.

(Если вы используете TextEdit на Mac, не забудьте указать TextEdit, что текст действительно является обычным текстом, перейдя в формат меню и выберите «Сделать обычный текст».)

Первая линия HTML-файла выше сообщает браузеру, какой это тип HTML. (DOCTYPE означает ТИП ДОКУМЕНТА). В данном случае это HTML версия 4.01.

Слова внутри <и> называются тегами и, как вы видите, документ содержится в и теги. Между и есть место для различного рода информации, не отображаемой на экране. Пока что он содержит заголовок документа, но позже мы добавим таблица стилей CSS там же.

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

Из тегов в примере

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *