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

Что означает резиновый фон: зачем он нужен и как сделать средствами css

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

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

Что такое резиновый фон и как им пользоваться?

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

Как же его можно заприметить на веб-сервисах? Очень просто. При увеличении или уменьшении окна браузера внедренные объекты (текст, рисунки, кнопки и т.д.) будут сдвигаться, подстраиваясь под размер вкладки.

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

Каким образом создается резиновый фон?

Каким образом создается резиновый фон

Существует несколько способов «превращения» обычного изображения в растягиваемое. Все они используют одно и то же свойство. Отличие состоит только в том, что второй способ, о котором я расскажу, появился благодаря css3.

Главные инструменты, которые используются в обеих вариантах, это background-size и background.

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

Итак, начнем с первого и более старого варианта.

Растягиваемость картинки устанавливается при помощи процентов. Так, строка background-size: 100% растянет изображение на все окно браузера вне зависимости от его размера.

В некоторых случаях можно увидеть и такой код: background-size: 100% auto.

Атрибут auto отвечает за вертикальное размещение картинки, которое должно автоматически подстраиваться под высоту вкладки.

Пример резинового фона

Для наглядности разберем пример. Для сайта был сверстан блок с текстом и задано резиновое изображение.

Обратите внимание на такие моменты:

  1. background: url (http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed. В этой строчке кода я описал изображение как фиксированное (оно не будет скролироваться вместе с содержимым веб-страницы) и не повторяющееся.
  2. Что касается слов centercenter, то они указывают, какая именно часть изображения всегда будет видна вне зависимости от масштаба. Первый параметр отвечает за левый и правый край рисунка, а второй – верхний и нижний край. Таким образом можно закрепить изображение так: leftbottom.
  3. В этом случае указанные границы всегда будут видны пользователю и само фоновое изображение сместиться. Также можно задавать данные значения через пикселы. Например, вместо первого параметра пишем 150px и тогда изображение сдвинется вправо на указанное число единиц.
  4. margin: 4% 4% 4% 4%. Такой способ указания отступов позволит даже в маленьком окне браузера сохранить расстояние между краями вкладки и блоком с текстом.

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

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

Замените у background- size параметры 100% auto на cover и оцените результат.

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

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

Как сделать фон для сайта, особенности применения CSS

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

Как сделать фон для сайта, разберем вопросы, как применить цвет в коде html, как использовать в качестве фона изображение и особенности применения CSS.

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

Содержание:

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

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

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

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

Его можно поменять в атрибуте bgcolor тега <body> при помощи шестнадцатеричного кода. Допустим, так:

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

Для начала надо найти заготовку фонового изображения. В интернете ресурсов для этого достаточно много, в частности сделать это удобно на сайте //www.subtlepatterns.com/.

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

Заходим на данный сайт, здесь все просто и понятно. Можно выбрать понравившееся изображение, пусть самое первое, для примера – seigaiha.png и сохранить на свой компьютер, как правило, в папку images своего проекта. Размер его составляет в данном случае 400 на 400 px.

Установить фоновое изображение на сайт можно различными способами. Можно стили вставить непосредственно в html-документ. Или применить написание кода в редакторе Notepad++, а затем перенести в код на хостинге.

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

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

Для этого тег должен иметь два атрибута. Первый атрибут, это background-image. Здесь мы указываем браузеру, где находится наша картинка.

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

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

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

У этого атрибута есть несколько значений, при которых картинка будет тиражироваться как по оси x, так и по оси y.

Или повторение идет только по горизонтальной оси – repeat-x, а также, по вертикали – repeat-y. Еще одно значение – no-repeat, то есть не повторять, оставить как есть.

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

Фоновая картинка может находиться в любом участке экрана. Для этого тоже есть специальное свойство, и называется оно background- position. Оно может иметь два значения. Первое для оси x, второе – для оси y.

Например, чтобы картинка отстояла от левого края окна на 200 px, а сверху 300 px, запись должна иметь вид:

background- position: 200px 300px;

В свойствах background- position возможно использовать не абсолютные значения в пикселях, а относительные – в процентах.

Это бывает удобно, если картинку требуется, например, выровнять по центру экрана по горизонтали, независимо от разрешения браузера пользователя. Запись будет иметь вид:

background-position: 50% 300px;

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

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

Как самостоятельно сделать фон на своем сайте. Html и Css в помощь

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

Красивый ковёр способен украсить любую, даже самую невзрачную комнату. Ваш веб-ресурс – та же комната. Если вы сделаете интересное оформление, то сможете привлечь большое количество посетителей. Сегодня я расскажу вам, как сделать фон на сайте.

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

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

HTML (HyperText Markup Language) в дословном переводе означает “язык разметки гипертекста”, все его команды интерпретируются браузерами и отображаются на экране в удобной для пользователя форме.

CSS (Cascading Style Sheets — каскадные таблицы стилей) представляет собой формальный язык, которым описывается внешнее оформление документа, написанного с использованием языка разметки. В основном он используется для описания и оформления внешнего вида интернет-страниц, которые были написаны с помощью языка HTML.

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

Фон в html

В качестве фона в html могут применяться следующие элементы:

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

Теперь о каждом из этих элементов поговорим подробнее.

коды цветов

Для установки цвета заднего фона нужно использовать свойство под названием background-color тега style.

В Нtml цвет можно задавать:

  1. В виде 3-х пар 16-тиричных цифр, каждая из которых отвечает за свой цветовой компонент (красный, зелёный, синий). Чтобы было понятнее, вспомните детство: это как смешивание цветов акварельных красок, например, синий + желтый = зеленый, и в зависимости от количества каждого получается новый оттенок. Так вот 16-тиричные цифры и определяют количество каждого цвета.
  2. Ключевыми словами (green, yellow и т.д.). В этом случае рекомендую использовать только основные цвета, так как название оттенков браузер может не распознать.
  3. В виде rgb (*,*,*), где снежинка — это число от 0 до 255. Также как и в первом случае задается количество определенного цвета (red, green, blue) для получения нужного результата.
  4. В последнее время стал возможен и вариант rgba (*,*,*,*), где первые цифры, как и в предыдущем случае, — это количество того или иного цвета, а последняя — уровень непрозрачности, который определяется числом от 0 до 1.

Чтобы получился прозрачный фон, надо задать свойству background-color значение transparent.

Фоновая картинка

фоновая картинка

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

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

Как же это сделать, если рисунок не резиновый? А очень просто! Запретите клонирование с помощью background-repeat. Допустимые значения для этого свойства:

  1. запрет повторений — no-repeat;
  2. по обеим осям – repeat;
  3. по вертикали — repeat-y;
  4. повторение фоновой картинки по горизонтали — repeat-x.

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

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

  • В пикселях;
  • Ключевым словом.

В некоторых случаях во время прокрутки страницы требуется фиксированное положение изображения. Фиксированный фон веб-ресурса поможет создать свойство background-attachment. Он принимает значения fixed или scroll. Для фиксации рисунка используйте первое значение.

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

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

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

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

Средства CSS

Выше описанные свойства вполне подходят и для стилевых каскадных таблиц (CSS). Для создания дизайна веб-ресурса с помощью CSS достаточно использовать команды тех примеров, что я приводил выше. Результат будет тот же.

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

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

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

Теперь вы знаете, как следует менять фон. Создайте свой «ковёр», расстелите его на своём сайте, наслаждайтесь его красотой и радуйте посетителей! Расскажите в социальных сетях знакомым и друзьям о том, чему вы научились благодаря этой статье. Подписывайтесь на обновления, следите за новыми редакциями, до скорых встреч!

Бесшовный CSS3 фон без использования изображения

Бесшовный CSS3 фон без использования изображения

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

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

Бесшовный фон на чистом CSS3

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

Рассмотрим несколько вариаций CSS3 паттернов, которые смело можно использовать в качестве бесшовного фона своего сайта.

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

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