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

Фон для сайта html (CSS свойство background)

Фон для сайта задаётся свойством background [w3.org].

background-color

background-image

background-repeat

background-position

background-attachment

background-clip

background-origin

background-size

background-blend-mode

Написание

Это равнозначное написание кода:

Через запятую можно указывать значения для нескольких фоновых изображений

44 комментария:

Виталий Зданевич Спасибо большое, Наталья, но я ничего не понимаю…

Какой же мне код написать в блок Блоггера, чтобы Клац — белый фон! Клац снова — обратно черный! NMitra В код

<body />
В гаджет HTML/JavaScript

<input onclick="getElementById(&#39;fon&#39;).style.backgroundColor=&#39;#fff&#39;;" type="button" value="белый цвет" /> NMitra Или ещё интересней. id для body также необходим. А в гаджет добавляем

фон тёмный — кнопка белая

фон белый — кнопка тёмная Виталий Зданевич Так этот код меняет только фон вне колбасы основной части блога (как в примере)? А чтобы весь фон менялся, колбаса и основной? NMitra Вот этот участок должен выглядеть как:

.post-outer < background-color: transparent; >Виталий Зданевич Столько кода &#8212; я совершенно ничего не понимаю&#8230; Это разные варианты или исправления.

Что же писать в темплейт и что-же &#8212; в гаджет. Мол:

В темплейте между X и Y пишем:

В код нового гаджета пишем:

xxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx NMitra Комментарий 6 — изменения в "Дизайн"-"Изменить HTML".

Комментарий 2 — там же добавляем в body.

Комментарий 3 — вносим код в новый гаджет HTML/JavaScript. Виталий Зданевич Там же это перед ]]> ? Виталий Зданевич съелся тег

] ] > < / b : s k i n > NMitra Там же — это в "Дизайн"-"Изменить HTML". NMitra Для того, чтобы и менялся текст:

<style type=&#39;text/css'>
.elementoVisible
.linkContraido <
&#160;&#160;&#160;&#160;&#160;cursor: pointer;
&#160;&#160;&#160;&#160;&#160;background: #FFF;padding-top: 10px;
&#160;&#160;&#160;&#160;&#160;display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #000;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
>
.linkExpandido <
&#160;&#160;&#160;&#160;&#160;cursor: pointer;padding-top: 10px;
&#160;&#160;&#160;&#160;&#160;background: #000;
&#160;display: block; width: 170px; height: 20px;
width: 170px;
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 15px/10px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #fff;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out; >
.elementoVisibleheader </style>

</script>
<div onclick="desplegarContraer(&#39;fon&#39;,this);" фон</div> Наталка Михайлівна Зуб Скажите пожалуйста, как поменять фон вкладок в меню. У меня меню белое, а нужно например такое #4682B4(блог темно синий и белое меню смотрится некрасиво). Когда я меняю его в background: #fff — получается фон простых менюшек синий, а многоуровневых — остается белый(причем фон выпадающих из них подменю синий). И еще вокруг меню белая окантовка остается, очень мешает. Можно ли её убрать? NMitra Покажите на скриншоте что вы хотите. Наталка Михайлівна Зуб Если бы я еще знала, что такое скриншот. Наталка Михайлівна Зуб В общем, я бы хотела сделать меню, как описано здесь:http://www.portal-sayt.my1.ru/publ/vertikalnoe_menju_92_navigacija_sajta/1-1-0-16. Но здесь оно белое, а мне нужно например синее (под мой блог http://revival2012nataliz.blogspot.com), белое не смотрится.Как это сделать? И можно ли убрать окантовку меню(оно остается белым). NMitra Удалите
border: 1px solid rgb(140, 140, 140);
Замените
.suckerdiv ul li a <
background: #4682B4;
>
Наталка Михайлівна Зуб Это нужно заменить в коде меню? Я там заменила, но все осталось как было. NMitra http://rezultat-blog.blogspot.ru/
Первая статья тестового блога. Наталка Михайлівна Зуб ОГРОМНОЕ ВАМ СПАСИБО. Вы просто даже не представляете, как вы мне помогли!БОЛЬШОЕ БОЛЬШОЕ СПАСИБО ТЫСЯЧУ РАЗ. Наталка Михайлівна Зуб Последний вопрос — его можно вставить как гаджет, или только через шаблон. Как лучьше? NMitra HTML код в гаджет HTML/JavaScript. Стиль CSS в соответствующее поле "Дизайнера шаблонов" — http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html NMitra Но такой код я бы весь внесла в гаджет. Наталка Михайлівна Зуб Спасибо еще раз. Я действительно наверное весь код внесу в гаджет, а то у меня там в шаблоне уже столько всего внесено, что потом не разберешься. Наталка Михайлівна Зуб Блин, ну я тупая. Все сделал, заменила в коде меню все ссылки на свои, свои названия. Все работает, кроме выдвигающихся подменюшек(они не выдвигаются их не видно).Там еще не знаю какой адрес ссылки нужно в этом месте:"subfolderstyle" href="http://forever-web.ru/load/12" Программы И ЗДЕСЬ "subfolderstyle" href="http://forever-web.ru/load/1" Все для uCoz(Это пункты меню,кот.с подменю) NMitra Ваши любые ссылки. Юрий Наташа, уже несколько раз сталкивался с проблемой адаптивного background, но пока не нашел достойного способа решения. Суть в том, что при прописывании background-size: 100% auto (или background-size: 100% 100%) при уменьшении ширины экрана изображение пропорционально уменьшается. Но. При этом оно "уезжает" вверх (срабатывает автоматически определяемая высота auto). Если background — фон всего шаблона, то особых проблем нет. Другое дело, если background — это баннер в хедере. Тогда между ним и нижележащей секцией при сужении экрана образуется огромный промежуток. Как от него избавиться средствами css?
Пока что знаю только один способ: сделать несколько дополнительных изображений соответстующего размера и прописать пути к этим картинкам посредством медиа запросов для разных разрешений мониторов. Но этот вариант отнимает прилично времени, т.к. приходится еще позиционировать background. Может существует более простой вариант? NMitra Живой пример нужен, сделайте на странице все изменения, отпишитесь в комментариях куда смотреть. Таких проблем в общем-то не должно быть, особенно если указывать background-position Юрий Наташа, добрый день. Вот ссылка на заготовку этой темы:
http://test.a-cont.ru/?themedemo=Cipriano
Чтобы было нагляднее, шаблон разместил на сайте третьего уровня. NMitra Надо пропорционально изменять размеры .pizza_main2

<div />
.pizza_main2 <
width: 100%;
padding-top: 40%;
background: url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s00/parovozik.jpg) no-repeat;
background-size: 100% auto;
>

Подробнее http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#video Верно я поняла проблему? NMitra width: 100%; не обязательно писать Юрий Наташа, .pizza_main1 и .pizza_main2 — это два изображения, наложенные друг на друга.
.pizza_main2 — прозрачная (opacity: 0;).
При наведении курсора это изображение появляется (:hover ). Тут все нормально.
Дело в том, что при уменьшении ширины экрана образуется большой разрыв между баннером и нижележащей секцией, озаглавленной "Наши преимущества". Как избежать появление этого промежутка просто не знаю. NMitra Сделайте для них одну обёртку, а .pizza_main1 и .pizza_main2 рассчитайте в процентах от обёртки Юрий Спасибо! Буду пробовать. Юрий Наташа, спасибо большое за ваши советы. Воспользовался инфой с вашего предыдущего комментарии (где упоминается padding-top: 40%). Сначала не смог понять, для чего он нужен. Оказалось, что с его помощью изображение как раз и адаптируется.
Прописал для изображения
:before
content: "";
display: block;
width: 100%;

а затем
background-size: cover;
padding-bottom: 56.25%
В итоге все получилось.
Еще раз большое спасибо!
Pashok927 Здравствуйте Наталья,делаю сайт,мне хотелось бы реализовать на своем сайте как бы 2 фона:что бы первый фон был картинкой сверху ,а потом плавно переливался в какой-нибудь цвет,примерно как реализовано здесь -http://www.igromania.ru/
Буду благодарен за помощь в реализации. NMitra Здравствуйте, картинка тяжёлая, поэтому её подгружают в последнюю очередь, например, с помощью window.onload. В Фотошопе когда сохраняете картинку, то ставьте галку Interlaced — будет плавная загрузка. NMitra То есть изначально стоит только background-color, а потом добавляют background-image. Пример того, как с помощью JavaScript можно поменять CSS http://shpargalkablog.ru/2013/08/appendchild-removechild-javascript.html#sozdat Только вам нужно не при клике, а при полной загрузки остальных элементов страницы. Анонимный Добрый день. Подскажите, пожалуйста, есть ли у Вас статья про CSS фильтры и их использование. CSS Filter blur родительский элемент передается. А как сделать чтобы на другие блоки свойство blur не передавалось? NMitra Добрый день. Толком не разбиралась, но ведёт себя как ожидается http://jsfiddle.net/NMitra/tqdfsytp/

img <
position: absolute;
left: 0;
-webkit-filter: opacity(.4) blur(5px);
filter: opacity(.4) blur(5px);
> Анонимный Спасибо большое за ответ. Нет ли возможности применить свойство blur к div с классом "one", а div&#39;у с классом "two", что находится в предыдущем div&#39;e убрать использование сво-ва blur.
div div еще текст /div
/div
.one <
width:500px;height:300px;background:gold;
-webkit-filter: opacity(.7) blur(5px);
filter: opacity(.7) blur(5px);
>
.two < width:300px;height:100px;background:black;
-webkit-filter: blur(0px);
filter: blur(0px);>
П.с. простите за тяжелый русский)) NMitra Поняла как с opacity ( http://shpargalkablog.ru/2013/02/opacity-css.html )

Можно через вложенный div http://jsfiddle.net/NMitra/tqdfsytp/1/

<style>
#one <
position: absolute;
-webkit-filter: blur(5px);
filter: blur(5px);
>
</style>

<div>
<div раз раз</div>
<div два два</div>
</div> NMitra Ещё забыла добавить
z-index: -1; Муслим Гасанов Спасибо. Вы очень помогли.

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

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

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

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

1. Как сделать фон в виде цвета или картинки?

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

1. Создать фон с помощью цвета;
2. Здесь также можно задействовать картинку или изображение;
3. Или создать плавный переход палитры, при помощи градиента, где фон получится оригинальным;
4. Также есть возможность задействовать сразу несколько вариаций, это картинка, и к ней идет цвет или несколько изображений;

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

— Для выставление фона в html, то здесь можно задействовать сразу несколько атрибутов bgcolor и background.
— Также, чтоб создать в формате HTML и сделать фон, который будет виде оттенка цвета, то для этого просто дописываем следующий атрибут bgcolor.

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

На этом вся установка.

Также нужно знать:

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

Так как есть возможность воспользоваться атрибутом style, который можно задать прямо в HTML.

На этом с HTML все вариаций, что переходим к стилям.

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

2. Как самостоятельно сделать фон в CSS?

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

Вот как использовать это значение, разберем подробнее.

1. Первое, что делаем, это в HTML нужно сразу присвоить элемент, он понадобится для вывода палитры цвета на определенном классе или задействовать атрибут style. По мне, то больше нравится все выводить через заданный тобой класс, ходя оба варианта отлично работают.

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

Как можно заметить, не чего сложного здесь такого не наблюдается.

3. Создаем фон в виде цвета в CSS

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

Значкение по умолчанию или кодовое:

Также можно задествовать шестнадцатеричный формат:

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

Чтоб поставить уровень прозрачности, то он идет в десятичном значении от 0 до 1, где 0 – полностью это полностью прозрачен, с 1 – уже появляется оттенок.

4.Как создать фон в виде градиента?

Один из многих вариантов, который больше нравится, так как игра с палитрой отличный вариант для редактирование под любой дизайн сайта. Здесь создаем плавный переход градиента, с одного оттенка на другой цвет, где получится плавный переход, и все очень корректно и красиво смотрится, что безусловно многих удивит. Что зразу задействуем свойство элемента, как background у которого еще будет свое значение linear-gradient.

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

5. Как создать сразу нескольких фонов?

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

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

Внимание: Здесь картинка обязательно должна идти первой.

Здесь задаем сразу несколько изображений, что идут через запятую, это обязательно:

Это делаем для заданного изображения, где у вас появляется возможность задавать своё позиционирование для создание оригинального фона.

Как сделать фон в онлайн сервисах и как его поменять на сайтах HTML и PHP

как поменять фон на сайте или блоге

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

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

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

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

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

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

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

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

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

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

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

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

фон для сайта PatternCooler

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

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

фон для блога в stripegenerator

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

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

фон или паттерн BgPatterns

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

фон tartanmaker

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

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

Главное правильно укажите путь к изображению. Также для страховки можете прописать вдобавок к картинке еще и цвет, на тот случай если вдруг по каким-либо причинам паттерн не загрузится.

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

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

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

Затем необходимо открыть файл style.css и указать адрес, где хранится ваше изображение.

Внимание! Если у вас картинка и файлы css темы, расположены в разных директориях, укажите точный путь к ней.

Перезагружаем страницу сайта и смотрим полученный результат.

P.S. Еще хотелось бы добавить, что вы можете настраивать как будет повторяться паттерн. Для этого существует атрибут repeat.

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

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

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

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

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

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

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

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