Background image xml css

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%);
>

Источник

background-image

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

Try it

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

Each background image is specified either as the keyword none or as an value.

To specify multiple background images, supply multiple values, separated by a comma:

background-image: linear-gradient( to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5) ), url("catfront.png"); /* Global values */ background-image: inherit; background-image: initial; background-image: revert; background-image: revert-layer; background-image: unset; 

Values

Is a keyword denoting the absence of images.

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

Initial value	none
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	no
Computed value	as specified, but with url() values made absolute
Animation type	discrete

Formal syntax

Examples

Layering background images

Note that the star image is partially transparent and is layered over the cat image.

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

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

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Implementing image sprites in CSS
• Image-related data types: ,
• Image-related functions:
  • cross-fade()
  • element()
  • image()
  • image-set()
  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • paint()
  • url()

  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.

  Источник

  How to add SVGs with CSS (background-image)

  There are TWO methods for displaying SVG images as a CSS background image:

  Notice with this method we have to treat the SVG code before it will work. In the example, we convert the SVG to a Data URI. You could even convert it to Base64, but that will result in a messier, longer code blob. It is a best practice to avoid Base64 in this case.

  Tip: Use this SVG to CSS converter tool to quickly convert your SVG code into a data URI.

  After you place your file path or SVG code into the background-image property, you can further tweak how the background displays. You see, the great thing about using an SVG as a CSS background-image is that they can be styled with CSS background properties.

  The CSS background-image properties

  Let’s review all the properties related to background-image and what they do.

  • Background-attachment:
    Example values: scroll; fixed; local;
    The attachment specifies how the background moves relative to the user’s screen. When the user scrolls, the background can scroll along with a given section, or stay put ( fixed ).
  • Background-position:
    Example values: center; top left; 50% 50%; right 30px bottom 15px;
    The background-position determines where the image is displayed within its container. The center keyword is great with large backgrounds and at making patterns symmetrical. With smaller backgrounds, you may reach for a combo of keywords and lengths to place the background image more precisely.
  • Background-size:
    Example values: cover; contain; 500px 250px; auto;
    This controls how big or small the image displays. A value of cover forces the image to fill its entire containing element in proportion, and either the excess width or height will get clipped. A value of contain is similar in that it fills its container in proportion, but without clipping. You can also provide a specific width and height value.
  • Background-repeat:
    Example values: no-repeat; repeat; repeat-x;
    The background-repeat property allows you to tile the background image into a pattern.
  • Background-color:
    Example values: red; #F00; rgb(0,255,165);
    SVGs are a transparent image format and if the SVG elements do not cover the entire viewBox, the background color will be visible behind your SVG.
  • Background-origin:
    Example values: border-box; padding-box; content-box;
    The origin determines the boundary of the background’s container. Border-box will stretch the background area for the entire container, while the padding-box and content-box values shrink the background area within the border and inside the padding respectively.
  • Background-clip:
    Example values: border-box; padding-box; content-box;
    Similar to background-origin , this property defines the background area, with one difference: the background doesn’t resize, but instead crops the background image to fit in the assigned boundary.
  • Background-blend-mode:
    Example values: multiply; screen; overlay, color-dodge, color;
    This property blends the colors of the target background with what is visible behind the target element, blending into a single colorful result. The blend modes are essentially the browser version of Photoshop’s blending modes.

  Layering multiple background images

  Background-image can hold multiple background image layers to achieve cool effects. To create these image layers, comma-separate each image value in a single background-image property. Then when you use any related background properties, comma-separate those varied values to coincide with the images, or instead use a single value which will apply to all images the same.

  background-image: url( '/path/image-1.svg' ), url( '/path/image-2.svg' ), url( '/path/image-3.svg' );

  You can mix images, SVG data URIs, and CSS gradients. But you need to overlap images with transparency or take advantage of the background-blend-mode discussed above. Otherwise you will only see one background. The first image is on top of the background stack.

  Let’s mix a few backgrounds now, and see what we get. First I headed over to the homepage of SVGBackgrounds.com to find a few quick backgrounds to layer together. Here is the code and results:

  BUT, this technique prevents the need to layer div containers to achieve a layer effect. Let’s try again, this time to make a simpler one that looks useable. Let’s place a pattern over a cool image texture.

  Much better!

  I could definitely see something more like this being used in a real-world project. Subtle backgrounds are always nice.

  Wrapping up about SVGs in CSS background-images

  We looked at how to add SVGs into the CSS property background-image . With all the related background properties and the fact you can layer backgrounds, there is little that can’t be achieved. This way of adding website backgrounds is powerful.

  ), the creator behind SVG Backgrounds. Hire me to help you with design on your website or app.

  ), the creator behind SVG Backgrounds. I produce free and paid resources every few months, sign up for alerts.

  Источник

  Как вставить svg картинку на свой сайт

  Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS.

  SVG через свойство background

  Вставка SVG в HTML

  SVG через тег img

  Inline SVG в HTML

  SVG data URI / base64

  Закодированное SVG изображение будет начинаться с:

  data: image/svg+xml; utf8; base64,

  SVG через тег object

  SVG через тег embed

  Вставка SVG в CSS через свойство background

  SVG через свойство background

  Inline SVG CSS background

  Свойство background будет начинаться с

  Также необходимо кодировать символы, например, с помощью этого инструмента.

  SVG data URI / base64

  data: image/svg+xml; utf8; base64,

  Источник