Css moz background image

background-image

The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties. If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value.

Note: Even if the images are opaque and the color won’t be displayed in normal circumstances, web developers should always specify a background-color . If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.

Syntax

background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png');

Values

Formal syntax

 #
where 
 = none | 
where 
 = | | | | | 
where 
 = image( [ [ | ]? , ? ]! )
 = image-set( # )
 = element( )
 = cross-fade( , ? )
 = | | | 
where 
 = | | | | | | currentcolor | 
 = [ | ] 
 = ? && 
 = | 
 = linear-gradient( [ | to ]? , )
 = repeating-linear-gradient( [ | to ]? , )
 = radial-gradient( [ || ]? [ at ]? , )
 = repeating-radial-gradient( [ || ]? [ at ]? , )
where 
 = rgb( [ [ <3> | <3> ] [ / ]? ] | [ [ #<3> | #<3> ] , ? ] )
 = rgba( [ [ <3> | <3> ] [ / ]? ] | [ [ #<3> | #<3> ] , ? ] )
 = hsl( [   [ / ]? ] | [ , , , ? ] )
 = hsla( [   [ / ]? ] | [ , , , ? ] )
 = [ left | right ] || [ top | bottom ]
 = #
 = circle | ellipse
 = closest-side | farthest-side | closest-corner | farthest-corner | | <2>
 = [[ left | center | right | top | bottom | ] | [ left | center | right | ] [ top | center | bottom | ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]] 
where 
 = | 
 = | 
 =  ?
 = | 
 

 
 
This paragraph is full of cats
and stars.
 
This paragraph is not.
 
Here are more cats for you.
Look at them!
 
And no more.
 

1. CSS
2. CSS Reference
3. CSS Background and Borders
4. Guides
   1. Border-image generator
   2. Border-radius generator
   3. Box-shadow generator
   4. Scaling background images
   5. Using CSS multiple backgrounds
   1. background
   2. background-attachment
   3. background-clip
   4. background-color
   5. background-image
   6. background-origin
   7. background-position
   8. background-position-x
   9. background-position-y
   10. background-repeat
   11. background-size
   12. border
   13. border-bottom
   14. border-bottom-color
   15. border-bottom-left-radius
   16. border-bottom-right-radius
   17. border-bottom-style
   18. border-bottom-width
   19. border-color
   20. border-image
   21. border-image-outset
   22. border-image-repeat
   23. border-image-slice
   24. border-image-source
   25. border-image-width
   26. border-left
   27. border-left-color
   28. border-left-style
   29. border-left-width
   30. border-radius
   31. border-right
   32. border-right-color
   33. border-right-style
   34. border-right-width
   35. border-style
   36. border-top
   37. border-top-color
   38. border-top-left-radius
   39. border-top-right-radius
   40. border-top-style
   41. border-top-width
   42. border-width
   43. box-shadow

   Источник

   background-image

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

   Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip и background-origin .

   Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none .

   Примечание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут background-color . Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.

   Начальное значение	none
   Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
   Наследуется	нет
   Обработка значения	как указано, но с абсолютными значениями url
   Animation type	discrete

   Синтаксис

   background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit; 

   Значения

   Это ключевое слово обозначает отсутствие изображений.

   (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US) .

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

   background-image =
   # (en-US)

   =
   | (en-US)
   none

   =
   | (en-US)
   (en-US)

   =
   url( (en-US) * (en-US) ) | (en-US)
   src( (en-US) * (en-US) )

   Примеры

   Несколько фонов и прозрачность

   Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

   HTML содержимое

   div> p class="catsandstars"> This paragraph is full of catsbr />and stars. p> p>This paragraph is not.p> p class="catsandstars"> Here are more cats for you.br />Look at them! p> p>And no more.p> div> 

   CSS содержимое

   pre, p  font-size: 1.5em; color: #FE7F88; background-color: transparent; > div  background-image: url("mdn_logo_only_color.png"); > p  background-image: none; > .catsandstars  background-image: url("startransparent.gif"), url("catfront.png"); background-color: transparent; > 

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

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

   BCD tables only load in the browser

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

   Found a content problem with this page?

   This page was last modified on 11 февр. 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 background-image Property

   The background-image property sets one or more background images for an element.

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

   Tip: The background of an element is the total size of the element, including padding and border (but not the margin).

   Tip: Always set a background-color to be used if the image is unavailable.

   Default value:	none
   Inherited:	no
   Animatable:	no. Read about animatable
   Version:	CSS1 + new values in CSS3
   JavaScript syntax:	object.style.backgroundImage="url(img_tree.gif)" 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
   url('URL')	The URL to the image. To specify more than one image, separate the URLs with a comma	Demo ❯
   none	No background image will be displayed. This is default
   conic-gradient()	Sets a conic gradient as the background image. Define at least two colors	Demo ❯
   linear-gradient()	Sets a linear gradient as the background image. Define at least two colors (top to bottom)	Demo ❯
   radial-gradient()	Sets a radial gradient as the background image. Define at least two colors (center to edges)	Demo ❯
   repeating-conic-gradient()	Repeats a conic gradient	Demo ❯
   repeating-linear-gradient()	Repeats a linear gradient	Demo ❯
   repeating-radial-gradient()	Repeats a radial gradient	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

   Sets two background images for the element. Let the first image appear only once (with no-repeat), and let the second image be repeated:

   body <
   background-image: url("img_tree.gif"), url("paper.gif");
   background-repeat: no-repeat, repeat;
   background-color: #cccccc;
   >
   

   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 */
   >
   

   Example

   Sets a linear-gradient (two colors) as a background image for a element:

   Example

   Sets a linear-gradient (three colors) as a background image for a element:

   #grad1 <
   height: 200px;
   background-color: #cccccc;
   background-image: linear-gradient(red, yellow, green);
   >
   

   Example

   The repeating-linear-gradient() function is used to repeat linear gradients:

   #grad1 <
   height: 200px;
   background-color: #cccccc;
   background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
   >
   

   Example

   Sets a radial-gradient (two colors) as a background image for a element:

   Example

   Sets a radial-gradient (three colors) as a background image for a element:

   #grad1 <
   height: 200px;
   background-color: #cccccc;
   background-image: radial-gradient(red, yellow, green);
   >
   

   Example

   The repeating-radial-gradient() function is used to repeat radial gradients:

   #grad1 <
   height: 200px;
   background-color: #cccccc;
   background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
   >
   

   Источник

   Читайте также:  При присваивании изменяется python