Картинка фон css: background-image | htmlbook.ru

Leave a Comment / Css / By /

масштабируем фон — учебник CSS

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

Значения background-size

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

Ключевые слова

  • auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

    
background-size: auto auto;

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

    
background-size: 250px auto;

    …то высота фоновой картинки будет вычисляться автоматически.

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




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




Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

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




Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:



Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике.

Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Свойство CSS background-image — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Эксперт
  • Последнее обновление: 01 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Синтаксис:  

     background-image: url('url')|none|initial|inherit;

    Значения свойств:

    • url(‘url’): Указывает URL-адрес изображения. Чтобы указать URL-адрес более чем одного изображения, разделите URL-адреса запятой.
    • нет: Это случай по умолчанию, когда изображение не отображается.
    • начальный: Используется для установки значения свойства по умолчанию.
    • inherit: Наследует свойство родительского элемента.

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

    • linear-gradient() сверху вниз.
    • radial-gradient(): Используется для установки радиально-градиентного фонового изображения, которое определяется как минимум двумя цветами от центра к краю.

    Мы будем использовать приведенные выше значения свойств и понимать их на примерах.

    url(‘url’): Когда фоновое изображение имеет URL.

    Синтаксис: 

     background-image: url('url')

    Пример 1: Этот пример иллюстрирует свойство background-image, задав значение url как url.

    HTML

    < html >

    < head >

         < title >background-image property title >

         < стиль >

         body {

             background-image: 19 9 9 9 0 90 

    92

    }

    H2,

    H4 {

    : GREL

    }

    Тело {

    Текст-Альген: Центр;

         }

         style >

    head >

     

    < body >

         < h2 >GeeksforGeeks h2 >

    < H4 > Иимфраж: URL; H4 >

    0092 < div >

           GeeksforGeeks: A computer science portal for geeks

         div >

    body >

    HTML >

    Выход:

    Нет: свойство.

    Синтаксис:  

     background-image: url('url') none

    Пример 2: Этот пример иллюстрирует свойство background-image, задав значение url равным none.

    HTML

    < html >

    < head >

         < title >background-image property title >

         < style >

         body {

             background-image: url(

    }

    H2,

    H4 {

    9191 H4 {

    919191 H4 {

    H4 {

    H4 {

    H4 {

    H4 {

    H40092 цвет: зеленый;

    }

    Тело {

    Текст-Альген: Центр;

         }

         style >

    head >

     

    < body >

         < h2 >GeeksforGeeks h2 >

         < h4 >background-image:url none; h4 >

    < Div >

    Geeksforgeeks: портал компьютерных наук для гека1      div >

    body >

    html >

    Output:

    начальный: Устанавливает для свойства значение по умолчанию.

    Синтаксис: 

     background-image: url('url') initial;

    Пример 3: Этот пример иллюстрирует свойство background-image, задав значение url как начальное.

    HTML

    < html >

    < head >

         < title > CSS свойство background-image title >

         < style >

     0092 body {

             background-image: url(

         }

          

         h2,

         h4 {

             color : green;

    }

    КОЛЕС {

    выравнивание текста: по центру;

         }

         style >

    head >

     

    < body >

    < центр >

             < h2 >GeeksforGeeks h2 >

             < h4 >CSS background-image:url initial; h4 >

        center >

    body >

    html >

    Output:

    Supported Browsers: The browser supported by background-image Property are listed below: 

    • Google Chrome 1. 0
    • Microsoft Edge 12.0
    • Firefox 1.0
    • Internet Explorer 4.0
    • Opera 3.5
    • Safari 1.0

    Статьи по теме

    Что нового

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

    Политика конфиденциальности

    350+ Css картинки | Скачать бесплатные картинки на Unsplash

    350+ Css картинки | Download Free Images on Unsplash
    • A photoPhotos 160
    • A stack of photosCollections 3.3k
    • A group of peopleUsers 30

    computer

    screen

    electronic

    programming

    monitor

    laptop

    Pankaj Patel

    berlingermanyHd обои для рабочего стола

    Агентство КОБУ

    Книжные изображения и фотографииHd обои для телефонаофис

    –––– –––– –––– – –––– – –––– –– – –– –––– – – –– – –– –– –––– – –.

    Jackson Sophat

    front-endblenderHd 3d wallpapers

    Maik Jonietz

    codewebHd design wallpapers

    Nick Karvounis

    polandśmiarycoding

    Michael Dziedzic

    lazy creek studiostylertx

    Jeffrey Leung

    textcodeselectronics

    Ferenc Almasi

    css3ui

    Greg Rakozy

    book coverCover photos & imagesfront cover

    Pankaj Patel

    digitaltechnologyanimation

    Sigmund

    sigmundboulevard charest estquébec

    Mika Baumeister

    computer classHd grey wallpapersnotepad

    Maxwell Nelson

    deskHd деревянные обоиpro

    Boitumelo Phetla

    южная африкайоханнесбургhtml

    Goran Ivos

    Hd computer wallpapersworkosijek

    AltumCode

    machine learningHd macbook wallpapersCoffee images

    Sigmund

    rivière-du-loupqccanada

    Niels Kehl

    amsterdamHd starbucks wallpapersovertoom

    Nate Grant

    Hd laptop wallpapersHd art wallpaperstech

    Jantine Doornbos

    groningennetherlandsfooddrop

    berlingermanyHd обои экрана

    front-endblenderHd 3d обои

    polandśmiarycoding

    textcodeselectronics

    book coverCover photos & imagesfront cover

    sigmundboulevard charest estquébec

    deskHd wood wallpaperspro

    Hd computer wallpapersworkosijek

    rivière-du-loupqccanada

    Hd laptop wallpapersHd art wallpaperstech

    –––– – ––– –––– – –––– ––––– –– – –– –––– – – –– ––– –– –––– – –.

    Книга картинки и фотографииHd обои для телефонаофис

    codewebHD дизайн обои

    lazy creek studiostylertx

    css3ui

    digitaltechnologyanimation

    computer classHd grey wallpapersnotepad

    south africajohannesburghtml

    machine learningHd macbook wallpapersCoffee images

    amsterdamHd starbucks wallpapersovertoom

    Related collections

    CSS

    98 photos · Curated by Lee Vickers

    CSS

    32 фото · Куратор Preszys Rowinska

    CSS

    19 photos · Curated by Andrea Pink

    groningennetherlandsfooddrop

    berlingermanyHd screen wallpapers

    polandśmiarycoding

    css3ui

    sigmundboulevard charest estquébec

    south africajohannesburghtml

    rivière-du-loupqccanada

    Hd laptop wallpapersHd art wallpaperstech

    Book images & фотографииHd обои на телефонoffice

    lazy creek studiostylertx

    обложка книгиФото и изображения на обложкепередняя обложка

    компьютерный классHd серые обоиблокнот

    Hd компьютерные обоиworkosijek

    amsterdamHd starbucks wallpapersovertoom

    groningennetherlandsfooddrop

    –––– –––– –––– –––– – –––– –– – –– –– –– – – –– ––– –– –––– – –.

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

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