Как сделать чтобы фон не повторялся в html

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

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

Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:

background-color — задает цвет фона для любого Html элемента;
background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
background-repeat — параметр повторения фоновой картинки;
background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

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

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

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

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

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

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

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

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

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

repeat-x - фоновое изображение будет повторяться только по горизонтали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

Позиционирование фона с помощью background-position

Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:

Горизонтальная позиция может принимать следующие значения:

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

left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
center — фоновое изображение располагается по центру элемента;
right — фон прижимается к правому краю элемента.

Вертикальная позиция может иметь следующие значения:

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

top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
center — фоновое изображение располагается по центру;
bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:

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

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% (по левому нижнему углу)
bottom = bottom center = center bottom = 50% 100% (внизу по центру)
bottom right = right bottom = 100% 100% (по правому нижнему углу)

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

Фиксация фона background-attachment

По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

Сборное правило background

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

Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

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

CSS свойства background используются для создания эффектов на заднем фоне страницы.

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

background-color
background-image
background-repeat
background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

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

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

Повтор фонового изображения

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

no-repeat - фоновое изображение не повторяется
repeat-x - повторяет фоновое изображение только по горизонтали
repeat-y - повторяет фоновое изображение по вертикали
repeat - фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Позиционирование фонового изображения

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

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

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

Фиксация фонового изображения

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

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

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Несколько фоновых изображений

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

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

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

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

Если элементу задать свойство background-image , то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:

И установим его в качестве фона для блока div :

Изображение дублируется по вертикали и горизонтали

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

Свойство background-repeat

Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:

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

no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).

repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).

repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).

Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

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

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

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

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

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

Color, background-color и background-image

Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:

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

background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, как уменьшить вес фотографии, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().

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

Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

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

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

Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?

Background-repeat — повтор фоновой картинки

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

repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:

Background-position — позиционирование фона

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

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

Так же из спецификации видно, что для позиционирования изображения фона с помощью background-position можно использовать как относительные (проценты), так и абсолютные величины (например, пиксели или другие единицы размеров применимые в CSS). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.

При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения:

Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. Например, в этом абзаце я позиционировал фоновое изображение через background position с помощью следующих CSS правил:

Т.е. значок счетчика Ливинтернет отстоит на 400 пикселов по горизонтали от левого края абзаца и на 25 пикселей по вертикали вниз от его верхнего края.

Позиционирование фоновой картинки с помощью background-position в процентах несколько отличается от описанного выше:

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

Позиция этой точки на ней теперь тоже определяется тем соотношением, которое задано в CSS правиле background-position (в нашем примере это 60 процентов от левой стороны и 40 процентов от верхнего края):

Проценты очень удобны для позиционирования, например, по центру (50% по осям X и Y) или правому краю (100% по оси X). Ведь размеры области элемента могут изменяться в зависимости от ширины области просмотра, а при использовании процентов будет изменяться и положение фонового изображения, чтобы всегда находиться либо по центру, либо по правому краю. Сделать это с помощью абсолютных единиц у вас не получится.

Можно использовать так же в background-position и комбинацию абсолютных и относительных единиц, как например, здесь:

Например, если вам нужно будет прижать картинку фона к правому краю абзаца, а сверху задать фиксированный отступ, то вполне подойдет такое CSS правило (пример смотрите в этом же абзаце):

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

В правиле с position можно также использовать слова и комбинации двух слов, которые будут определять крайние позиции. Использовать можно слова left, center, right, top, bottom, а так же их комбинации и абсолютных, и относительных цифровых значений.

Например, вот так можно задать крайние положения в позиционировании фонового изображения с помощью слов (рядом приведены цифровые аналоги, чтобы было понятнее):

Left в комбинации означает ноль по оси абсцисс
Right — 100% по оси абсцисс
Top — ноль по оси ординат
Bottom — 100% по оси ординат
Center — 50% по обоим осям

Одиночные записи left, right, top, bottom, center подразумевают, что с ними в паре должно стоять center (или 50%), т.е. выравнивание осуществляется по центру левого, правого, верхнего, нижнего края или по центру всей области, отведенной для Html элемента, соответственно.

Хотя слова в background-position и кажутся более понятными, но на практике проще и понятнее будет использовать цифры (абсолютные или относительные — не суть важно), ибо первая цифра это всегда X, а вторая — Y. Слова же могут стоять в разной последовательности.

Что примечательно, если в этом расчудесном CSS правиле написать только одно значение, то второе будет заменено по умолчанию на 50% (середина по вертикали).

Background-attachment и сборное CSS правило

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

Или же на вроде того, что делает плагин Simple Counters, когда показатели счетчика фоловеров в Твиттере и подписчиков по версии Feedburner остаются недвижимы на странице при ее прокрутке:

У этого правила имеется всего лишь два значения scroll (используется по умолчанию) и fixed:

В background attachment мы задаем точку отсчета координат, от которой в последствии отсчитывается отступ заданный в background position. При значении scroll за начало координат принимается левый верхний угол области Html элемента, для которого задается фоновое изображение.

А вот при использовании значения fixed в background-attachment за начало координат принимается тоже левый верхний угол, но уже не какого-то элемента, а области просмотра (той части вебстраницы, которая сейчас видна пользователю на экране его монитора).

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

Я задал такое Css правило для расположенных выше трех абзацев. Прокручивая текст вы увидите, что проходя через середину области просмотра с правого края этих абзацев (если у вас разрешение экрана 1280 на 1024, а если больше, то иконку вы вообще можете не увидеть, ибо она сдвинется правее границы параграфов) будет появляться фоновое изображение в виде моей иконки RSS.

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

Однако, если задать фиксированное положение фона для таких элементов как Body или же Html (т.е. в тегах, которые охватывают всю веб страницу), то данная картинка будет видна всегда в области просмотра и именно такое применение находит CSS свойство background-attachment в современной блочной верстке.

Есть еще сборное правило Background, которое позволяет объединить все пять описанных выше правил в одном флаконе. Причем, значения для всех пяти в сборном варианте можно будет использовать в любом порядке и в любом количестве (они уникальны и браузер их друг с другом не перепутает). Все, что вы не укажете в явном виде, браузер посчитает равным значению по умолчанию.

Показанное в примере сборное правило применено к этому абзацу для наглядности. Получилось не красиво, но это не главное. Для данного параграфа используется фоновая заливка странного желтого цвета, а так же используется изображение логотипа Лайвинтернет, выровненное по центру абзаца. Т.к. для правила background-attachment никакого значение не задано, то используется значение scroll (принятое по умолчанию).

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

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

Комментарии и отзывы (9)

Причина большой посещаемости этого блога очень проста — только мне будет необходимо раз 50 сюда вернуться.

Мой комментарий отличается от комментария Юрия только одним-я в шоке и зайду сюда ещё 100 раз.Сказать спасибо автору сайта-значит ничего не сказать!

Присоединяюсь к вышесказанному! ))

Подскажите, как можно сделать фон, состоящий из 2 картинок, а между ними простая заливка (первая картинка вверху, потом заливка, вторая картинка внизу)?

Все волосы уже себе на макушке порвал — не получается никак!

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

Читаю Ваш блог от корки до корки, он СУПЕР.

Дмитрий, очень приятно видеть материал своих курсов в хорошей пост-обработке:)

Но картинки можно было бы переделать. Сделаны они были наспех перед занятиями в условиях цейтнота. На них избыточны записи 100% 50% — можно ставить просто 100% (вторая координата 50% автоматом).

Ну и поправлю — область просмотра ни в коем случае не часть веб-страницы. Viewport и Canvas — это 2 разных понятия (иначе потом с meta name="viewport" запутаетесь).

Друзья, подскажите плиз:

зачем иногда ставят на бекграунд прозрачную картинку??

У меня в css сначала цвет указан, а сверху — прозрачная картинка.

Это нафига так и могу ли я убрать картинку для ускорения сайта?

>> зачем иногда ставят на бекграунд прозрачную картинку??

А как сделать так, чтобы можно было указывать ширину и высоту фона текста? Как у Вас в верхнем меню?

Свойство background-repeat определяет, как будет повторяться фоновое изображение. При значении по умолчанию background-repeat повторяется по горизонтали и по вертикали. Если установлено значение "repeat-x", изображение будет повторяться только по горизонтали. Если установлено значение "repeat-y", изображение будет повторяться только по вертикали. Есть еще две значения: "space" и "round". При значении "Space" изображение будет повторяться без обрезки, а при значении "round" изображение будет повторяться, не оставляя пустые пространства.

Свойство background-repeat нужно использовать вместе со свойствами background-image и background-position.

Значение по умолчанию	repeat
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM Syntax	object.style.backgroundRepeat = "repeat-x";

Синтаксис

Пример

В следующем примере background-image не повторяется:

Пример

Пример, где применено значение "repeat-x". При этом значении background-image повторяется только по горизонтали:

Пример

Рассмотрим пример со значением "repeat-y". В этом случае изображение повторяется только по вертикали:

Пример

Пример, где применено значение "space". Изображение будет повторяться без обрезки:

Пример

Пример со значением "round". Изображение повторяется, не оставляя пустые пространства:

Читайте также: