Главная » Языки программирования

Css centering background image no repeat

Содержание
  1. background-position
  2. Интерактивный пример
  3. Синтаксис
  4. Значения
  5. Официальный синтаксис
  6. Примеры
  7. HTML
  8. CSS
  9. Результат
  10. Спецификации
  11. Совместимость браузеров
  12. Quantum CSS заметки
  13. Смотрите также
  14. Found a content problem with this page?
  15. CSS background-position Property
  16. Browser Support
  17. CSS Syntax
  18. Property Values
  19. More Examples
  20. Example
  21. Example
  22. Example
  23. Example
  24. Example

background-position

CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin .

Интерактивный пример

Синтаксис

/* Ключевые значения */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* значения */ background-position: 25% 75%; /* значения */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Несколько изображений */ background-position: 0 0, center; /* Значения смещения края */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Глобальные значения */ background-position: inherit; background-position: initial; background-position: unset;

Свойство background-position указывается в виде одного или нескольких значений , разделённых запятыми.

Значения

(en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center .Синтаксис 1-значения: значение может быть:

  • Значение ключевого слова center , которое центрирует изображение.
  • Одно из значений ключевых слов top , left , bottom , right . Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
  • или . Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
    • Одно из значений ключевых слов top , left , bottom , right . Если здесь указаны left или right , то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom , то оно определяет Y, а другое значение определяет X.
    • Если одно значение top или bottom , то другое значение не может быть top или bottom .

    Официальный синтаксис

    background-position =
    # (en-US)

    =
    [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) ] (en-US) | (en-US)
    [ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US) | (en-US)
    [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) ? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ? (en-US) ] (en-US)

    =
    | (en-US)

    Примеры

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

    HTML

    div class="exampleone">Example Onediv> div class="exampletwo">Example Twodiv> div class="examplethree">Example Threediv>

    CSS

    /* Общий среди всех -ов */ div  background-color: #FFEE99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; > /* В этих примерах используется сокращённое свойство 'background' */ .exampleone  background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; > .exampletwo  background: url("startransparent.gif") #FFEE99 3em 50% no-repeat; > /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree  background-image: url("startransparent.gif"), url("catfront.png"); background-position: 0px 0px, center; >

    Результат

    Спецификации

    • background-position-x : Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
    • background-position-y (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово

    Совместимость браузеров

    BCD tables only load in the browser

    Quantum CSS заметки

    • В Gecko есть ошибка, означающая, что background-position не может быть transitioned между двумя значениями, содержащими разные числа значений (en-US), для примера background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (смотрите баг 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.

    Смотрите также

    Found a content problem with this page?

    This page was last modified on 15 дек. 2022 г. by MDN contributors.

    Your blueprint for a better internet.

    Источник

    CSS background-position Property

    The background-position property sets the starting position of a background image.

    Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

    Default value: 0% 0%
    Inherited: no
    Animatable: yes. Read about animatable Try it
    Version: CSS1
    JavaScript syntax: object.style.backgroundPosition=»center» Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    CSS Syntax

    Property Values

    Value Description Demo
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom    		 If you only specify one keyword, the other value will be «center» Demo ❯
    x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% Demo ❯
    xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions Demo ❯
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    More Examples

    Example

    How to position a background-image to be centered at top:

    body <
    background-image: url(‘w3css.gif’);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    >

    Example

    How to position a background-image to be bottom right:

    body <
    background-image: url(‘w3css.gif’);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom right;
    >

    Example

    How to position a background-image using percent:

    body <
    background-image: url(‘w3css.gif’);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    >

    Example

    How to position a background-image using pixels:

    body <
    background-image: url(‘w3css.gif’);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50px 150px;
    >

    Example

    Use different background properties to create a «hero» image:

    .hero-image <
    background-image: url(«photographer.jpg»); /* The image used */
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 500px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    >

    Источник

    Читайте также:  Python collections deque empty
Оцените статью
© 2024 Программирование