CSS - Background (Image)

About

The background of an element is the total size of the element:

Boxdim

When two element overlap, you can send one element to the background by setting the z-index

Properties

All properties that start with the prefix background are background properties.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right; 
background-origin: border-box, content-box;
background-repeat: no-repeat;
background-color: white
background-clip: border-box;
background-attachment: fixed;
background-size: cover; /* scale the background image proportionally so that its width and height are equal to, or greater than, the width/height of the element. */

More Documentation Reference - CSS Background 3

For a little bit the same property than background-size:

Demo

Background vs margin and padding

This demo helps to visualize the effect of margin and padding against the background limits with a light color against a dark color for the document.

You will see that only the margin has an effect on the background area.

  • The CSS
.backgroundWithPadding {
    background-color: SkyBlue ;
    padding: 15px;
    border: 5px solid black;
}
.backgroundWithoutPadding {
    background-color: SkyBlue ;
    border: 5px solid black;
}
.backgroundWithPaddingAndMargin {
    background-color: SkyBlue ;
    border: 5px solid black;
    padding: 5px;
    margin: 10px;
}

body {
    background-color: steelblue;
}
  • The HTML
<div class="backgroundWithPadding" >
light blue background With Padding and Without Margin
</div>
<div class="backgroundWithoutPadding" >
light blue background Without Padding and Without Margin
</div>
<div class="backgroundWithPaddingAndMargin " >
light blue background With Padding and Margin
</div>
  • The result where you can see that only the margin has an effect on the background area

The svg is used in an URL and should then be url encoded. (You can grab a background css directly via this codepen)

Svg Background Image

With the Url Data scheme

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17' height='17' viewBox='0 0 17 17'%3E%3Cg%3E%3C/g%3E%3Cpath d='M17 16v1h-17v-1h17zM12 10h2v5h1v-6h-4v6h1v-5zM7 7h2v8h1v-9h-4v9h1v-8zM2 3h2v12h1v-13h-4v13h1v-12z' fill='%23000000' /%3E%3C/svg%3E");
}

.navbar-toggler-icon {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background-size: 100% 100%;
}
<span class="navbar-toggler-icon"></span>





Discover More
Css Padding
CSS - Padding

The padding area is the space between the content of the box and its border. In the below image, this are the areas: TP (top padding) BP (bottom padding) LP (left padding) RB (right padding)...
CSS - How to set an opacity (on any element, background image included)

This article shows you what are the two options to set an opacity on HTML element. Namely, the opacity property and the alpha of a generated image.
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
Boxdim
CSS - Spacing (Box Dimension)

spacing in CSS is not a specific term but refers generally to the setting of the following of a box properties: - the padding set how far from the border the text should be and is an area taken into...
CSS - Transitions

in CSS. Transition properties create smooth transitions (using timing functions) between different values property of two different element state. The transition short property is where: transition-durationtransition-duration:...
Dark Mode

A Dark Mode is page based on a black background. This mode is implemented through a toggle that switch dynamically the styling of the document. Example: between the following CSS rule definition...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Boxdim
What is the CSS Margin of a Box?

This page is the margin in CSS. The margin of a box determines the vertical and horizontal distance between two boxes. The margin of a box determines the vertical and horizontal distance between...



Share this page:
Follow us:
Task Runner