The CSS background property permits you to control the background of any element (what paints underneath the content in that element). Background property in CSS is a shorthand property, which means that it provides you to communicate what would be various CSS properties in one.
- Constituent Properties of CSS Background
- Syntax
- Possible Values of CSS Backgrounds
- CSS background-color Property
- CSS background-image Property
- CSS background-position Property
- CSS background-origin Property
- CSS background-repeat Property
- CSS background-size Property’
- CSS background-attachment Property
Constituent Properties of CSS Background
The background of an element can be changed using several CSS properties:
background-color
background-image
background-clip
background-position
background-origin
background-repeat
background-attachment
background-size
Syntax
/* Using a <background-color> */ background: green; /* Using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* Using a <box> and <background-color> */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png");
The background
property is defined as one or more background layers, divided by commas.
The syntax of each layer is as regards:
- Each layer may consist of zero or one occurrence of any of the following values:
<attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
- The
<bg-size>
value may only be covered immediately after<position>
, separated with the ‘/’ character, like this: “center/80%”. - The
<box>
value may be included zero, one, or two times. If included once, it hovers bothbackground-origin
andbackground-clip
. If it is included twice, the first occurrence setsbackground-origin,
and the second setsbackground-clip
. - The
<background-color>
value may only be involved in the last layer specified.
Possible Values of CSS Backgrounds
Background in CSS is a shorthand property and stand for the following. This value will vary depending on the actual property.
background-color − Sets a solid color for the element’s background, padding, and border background.
background-image − Defines the location of an image to be placed in the element’s background.
background-repeat − Sets a repeat direction for an image in the element’s background.
background-attachment − Sets an attachment state for any images in the element’s background.
background-position − Sets a position for the original image in the element’s background.
background-clip − Specifies the painting area of the background images
Do Check:
CSS background-color
body { background-color: cyan; }
With CSS, a color is most often specified by:
- a valid color name – like “blue”
- a HEX value – like “#ffffff”
- an RGB value – like “rgb(0,0,255)”
You can set the background color for any HTML elements:
h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; }
CSS background-image Property
This is used to change the background image of a page, generally from paperwhite to any image (or gif) of your choice.
body { background-image: url("peep.jpeg"); background-color: cyan; }
CSS background-position Property
How to position a background-image, (with CSS Syntax)
body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }
background-position: value;
How to position a background-image using percent?
body { background-image: url('peep.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; }
CSS background-origin Property
Let the background-image start from the upper left corner of the content:
.e { border: 10px solod black; padding: 20px; background: url(img.jpeg); background-repeat: no-repeat; background-origin: content-box; }
CSS background-repeat Property
Repeat a background-image only horizontally:
body { background-image: url("img.jpeg"); background-repeat: repeat-x; }
CSS background-size Property’
Specify the size of a background-image with “auto” and in pixels:
.e1{ background: url(img1.jpg); background-repeat: no-repeat; background-size: auto; } .e2{ background: url(img2.jpg); background-repeat: no-repeat; background-size: 300px 100px; }
CSS background-attachment Property
A background-image that will not scroll with the page (fixed):
body { background-image: url("img.jpeg"); background-repeat: no-repeat; background-attachment: fixed; }