backgroundThe CSS background shorthand property sets the background effects of an element. This controls what paints underneath the content of an element.
The following example shows the complete list of the properties that can be specified to create any background effect for an element:
header {
background:
url('folder/image.jpg') // image
top center / // position
150px 150px // size
no-repeat // repeat
fixed // attachment
padding-box // origin
content-box // clip
blue; // color
}
See the Pen
CSS Background Example by Solomon Eseme (@kaperskyguru)
on CodePen.
The background shorthand is made up of eight component properties. Let’s dive into each of them below.
background-imagebackground-image is a CSS property that sets one or multiple images to the background of an element. When specifying multiple images, they are displayed as a stack, with one on top of the other.
The default value of background-image is none, which simply means that no image will be displayed.
header {
background-image: none
}
This example specifies only a single image.
header {
background-image: url('folder/image.jpg');
}
This example will display the first image on top of the second image.
header {
background-image:
url('folder/first.jpg'),
url('folder/second.jpg')
}
This example specifies a linear-gradient above the second image.
header {
background-image:
linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
url('folder/second.jpg')
}
background-positionThe background-position property sets the starting position of the background image. Its values specify the coordinates where the image will be placed relative to the edges of the element’s box.
background-position can be specified with keywords (left, top, bottom, right, center); percentages (0%, 25%, etc.); or lengths (0cm, 3px, etc.). These values can be combined together.
The default value of background-position is 0% 0%, which indicates the top-left corner of the element’s box.
Learn more →header {
background-position: 0% 0% // top left
}
header {
background-position: top // same as top center
}
header {
background-position: left // same as left center
}
header {
background-position: center // center
}
header {
background-position: 20% 50% // 20% from left and 50% from top
}
header {
background-position: bottom 20px left 50px // 20px from bottom and 50px from left
}
header {
background-position: left 2cm bottom 5cm; // 2cm from left and 5cm from bottom
}
background-sizeThe background-size property specifies the background image size. It defines whether the image will be stretched, displayed in its native size, or fill the entire available space.
It’s also worth noting that the spaces now covered by the image size will be filled with the background color.
background-size can be specified using keywords, percentages, or lengths.
cover: Scales the image as large as possible, but will never stretch the image. It can also crop the image either vertically or horizontally to cover any empty spacescontain: Scales the image as large as possible but will never crop or stretch the imageauto: Scales the image in the corresponding direction such that the image maintains its original proportionsThe default value of the background-size is auto.
header {
background-size: auto;
}
header {
background-size: auto; // default value
}
// stretches to fill the element's box
header {
background-size: cover;
}
// scale the image without cropping/scretching. Image can repeat to fill element's box
header {
background-size: contain;
}
// scale image by 20% width & auto for height. Image can repeat to fill element's box
header {
background-size: 20%|em|cm|auto|px;
}
// scale image by 3em width and 25% height. Image can repeat to fill element's box
header {
background-size: 3em 25%;
}
// You can specify more values for multiple backgrounds
header {
background-size: 50%, 25%, 60%;
}
background-repeatThe background-repeat property specifies how the background image if and/or how it should be repeated. A background image can be specified by this property to be repeated horizontally vertically or if it should even repeat at all.
Inasmuch as an image is clipped to the size of its element by default, it can also be scaled to fit or fill the element’s box using the background-repeat property.
The background-repeat property is specified using keyword values.
repeat: Repeats the image to cover the entire backgroundno-repeat: Will not repeat the imagespace: Repeats the image without clipping it, and evenly distributes the whitespace between the repeated imagesround: Repeats the image, and fills in the whitespace between the repeated imagesrepeat-x: Repeats the image only along the x-axisrepeat-y: Repeats the image only along the y-axisThe default value for background-repeat is repeat, which repeats the image until it fills the entire element background.
header {
background-repeat: repeat;
}
header {
background-repeat: repeat-x; // equivalent `repeat no-repeat`
}
header {
background-repeat: repeat-y; // equivalent `no-repeat repeat`
}
header {
background-repeat: repeat; // equivalent `repeat repeat`
}
header {
background-repeat: space; // equivalent `space space`
}
header {
background-repeat: round; // equivalent `round round`
}
header {
background-repeat: no-repeat; // equivalent `no-repeat no-repeat`
}
background-attachmentThe background-attachment property specifies whether the background image should be scrollable or fixed to the viewport.
The background-attachment property is specified only with keywords.
scroll: Fixes the background image to its element. Does not scroll the background image with the contentfixed: Fixes the background image to the viewport. Even if the content is scrollable, the background image will never scrolllocal: Fixes the background image relative to the element’s content, thereby allowing the background image to scroll as the content scrollsThe default value for background-attachment is scroll.
header {
background-attachment: scroll;
}
header {
background-attachment: scroll; // Fix image to element (can scrol only if the element is scrolling not the content of the element)
}
header {
background-attachment: fixed; // Fix image to viewport
}
header {
background-attachment: local; // Scrolls the image with content
}
// On multiple images we can specify double values
header {
background-image: url("star1.gif"), url("star2.gif");
background-attachment: fixed, scroll;
}
background-originThe background-origin property specifies where to paint the background image — either across the whole element using content-box value, inside the border using the border-box value or inside the padding using the padding-box value.
Note that when background-attachment is set to fixed the background-origin is ignored and also background-origin is same with background-clip except that it resizes the background rather than clipping.
The background-origin property is specified using keyword values.
content-box: Positions the background relative to the content boxborder-box: Positions the background relative to the border boxpadding-box: Positions the background relative to the padding boxThe default value for background-origin is the padding-box keyword.
header {
background-origin: padding-box;
}
header {
background-origin: border-box;
}
header {
background-origin: padding-box;
}
header {
background-origin: content-box;
}
// We can specify double values for multiple images
header {
background-image: url('logo.jpg'), url('main.png');
background-origin: content-box, padding-box;
}
background-clipThe background-clip property determines whether an element’s background will extend its box. Note that this property will only have a real effect when there is a background image or background color specified; otherwise, it will only have a visual effect on the border.
The CSS background-clip property is specified using keyword values.
border-box: Extends the background beyond the element’s bordercontent-box: Clips the background to the content of the elementpadding-box: Extends the background beyond the element’s paddingtext: An experimental value that clips the background to the foreground textThe default value for background-clip is the border-box keyword.
header {
background-clip: border-box;
}
header {
background-clip: border-box;
}
header {
background-clip: padding-box;
}
header {
background-clip: content-box;
}
background-colorThe CSS background-color property is used to set the color of the element’s background. It can be combined with the background-image property as a fallback option if the image is taking time to load.
background-color values are specified either as color names, hex values, RGB/RGBA values, or HSL/HSLA values.
The default value for background-color is the transparent keyword.
header {
background-color: transparent;
}
/* Keyword values */
header {
background-color: red;
}
/* Hexadecimal value */
header {
background-color: #bbff00;
}
/* RGB value */
header {
background-color: rgb(255, 255, 128); /* Fully opaque */
}
header {
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
}
/* HSL value */
header {
background-color: hsl(50, 33%, 25%); /* Fully opaque */
}
header {
background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */
}
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Adobe XD is Adobe’s version of Figma – but does it match up? This blog is an attempt at decoding the good and bad of both, and figuring out which one is best used for which use case.
Learn how to implement one-way and two-way data binding in Vue.js, using v-model and advanced techniques like defineModel for better apps.
The globalization of your product opens up opportunities for growth, however, every new market comes with its own challenges.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
