Html background для div

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

With CSS, a color is most often specified by:

• a valid color name — like «red»
• a HEX value — like «#ff0000»
• an RGB value — like «rgb(255,0,0)»

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the ,

, and elements will have different background colors:

div background-color: lightblue;
>

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 — 1.0. The lower value, the more transparent:

Example

Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

The CSS Background Color Property

Источник

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset; 

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• Each layer may include zero or one occurrences of any of the following values:
  • The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
  • The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
  • The value may only be included in the last layer specified.

  Values

  See background-clip and background-origin . Default: border-box and padding-box respectively.

  See background-color . Default: transparent .

  The following three lines of CSS are equivalent:

  background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent; 

  Accessibility concerns

  Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

  Formal definition

  • background-image : none
  • background-position : 0% 0%
  • background-size : auto auto
  • background-repeat : repeat
  • background-origin : padding-box
  • background-clip : border-box
  • background-attachment : scroll
  • background-color : transparent
  • background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size : relative to the background positioning area
  • background-image : as specified, but with url() values made absolute
  • background-position : as each of the properties of the shorthand:
    • background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-color : a color
    • background-image : discrete
    • background-clip : a repeatable list of
    • background-position : a repeatable list of
    • background-size : a repeatable list of
    • background-repeat : discrete
    • background-attachment : discrete

    Formal syntax

    background =
    [ # , ]?

    =
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    ||
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    |
    none

    =
    [ left | center | right | top | bottom | ] |
    [ left | center | right | ] [ top | center | bottom | ] |
    [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]

    =
    [ | auto ] |
    cover |
    contain

    =
    repeat-x |
    repeat-y |
    [ repeat | space | round | no-repeat ]

    =
    scroll |
    fixed |
    local

    =
    border-box |
    padding-box |
    content-box

    =
    |

    =
    |

    =
    url( * ) |
    src( * )

    Examples

    Setting backgrounds with color keywords and images

    HTML

    p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p> 

    CSS

    .warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; > 

    Result

    Specifications

    Browser compatibility

    BCD tables only load in the browser

    See also

    Found a content problem with this page?

    This page was last modified on Jul 18, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    Фон блока в CSS

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

    Цвет фона блока

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

    background-color: transparent — прозрачный фон (по умолчанию)

    background-color: inherit — значение принимается от родительского элемента

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

    Создадим блок, зададим ему размеры и установим цвет фона.

    Область заполнения фона

    Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает такие значения:

    background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

    background-clip: padding-box — весь блок без рамки

    background-clip: content-box — фон заполняет только область содержимого

    При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.

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

    Фон заполняет только контент

    Фон в виде картинки

    В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:

    background-image: url(«путь к файлу»);

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

    Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

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

    Размер фоновой картинки

    Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.

    Также у свойства background-size есть такие значения:

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

    background-size: cover — картинка заполняет весь фон, сохраняя пропорции.

    background-size: contain — вся картинка отображается в фоне.

    Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.

    Укажем размер фоновой картинке:

    background-size: 480px 280px;

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

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

    Первое слово — это горизонтальное позиционирование. Значение может быть left , center или right .

    Второе слово — это вертикальное позиционирование. Значение может быть top , center или bottom .

    Расположим изображение справа сверху.

    background-position: right top;

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

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

    Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:

    background-repeat: repeat — повторяется по горизонтали и по вертикали (по умолчанию)

    background-repeat: repeat-x — повторяется только по горизонтали

    background-repeat: repeat-y — повторяется только по вертикали

    background-repeat: no-repeat — не повторяется

    background-repeat: inherit — значение принимается от родительского элемента

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

    background-repeat: no-repeat;

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

    Попробуйте разные способы повторения изображения.

    Прокрутка фона

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

    background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)

    background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера

    background-attachment: local — фон движется вместе с содержимым при прокрутке блока

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

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

    Коприрование материалов сайта возможно только с согласия администрации

    2017 — 2023 © basecourse.ru Все права защищены

    Источник

    Читайте также:  Php http response object