revision:
The background CSS property is a shorthand property for:
background-color,
background-image,
background-position,
background-size,
background-repeat,
background-origin,
background-clip,
background-attachment.
It does not matter if one of the values above are missing, e.g. "background:#ff0000 url(smiley.gif);" is allowed.
Property values
background-color : specifies the background color to be used.
background-image : specifies ONE or MORE background images to be used.
background-position : specifies the position of the background images
background-size : specifies the size of the background images.
background-repeat : specifies how to repeat the background images.
background-origin : secifies the positioning area of the background images.
background-clip : specifies the painting area of the background images.
background-attachment: specifies whether the background images are fixed or scrolls with the rest of the page.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Syntax examples
/* 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");
/* Global values */
background: inherit;
background: initial;
background: revert;
background: unset;
Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
This is some text
<style>
.een{background: lightblue url("../pics/car2.jpg") no-repeat fixed center;}
</style>
<div class="een">
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
<p class="spec">This is some text</p>
</div>
</div>
<style>
.twee{margin-left: 4vw; width: 35vw; height: 25vw; background-color: rgba( 54, 202, 197, 0.8);
background-image:repeating-linear-gradient (120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 3px, transparent 3px,
transparent 60px),repeating-linear-gradient(60deg, rgba(255,255, 255,.1), rgba(255,255,255,.1) 1px, transparent 3px,
transparent 60px), linear-gradient(60deg, rgba(139,139,139,.6) 25%, transparent 25%, transparent 75%, rgba(139,139,139,
.6) 75%, rgba(139,139,139,.6)), linear-gradient(120deg, rgba(139,139,139,.6) 25%, transparent 25%, transparent 75%,
rgba(139,139,139,.6) 75%, rgba(139,139,139,.6));background-size: 3vw 5vw;}
</style>
<div class="twee"></div>
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Property values
scroll : the background image will scroll with the page. This is default
fixed : the background image will not scroll with the page
local : the background image will scroll with the element's contents
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the page
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
the image will scroll with the text
<div class="spec">
<div id="div9"></div>
<div id="div9a">
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
<p>the image will scroll with the page</p>
</div>
<div id="div9b">
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
<p>the image will scroll with the text</p>
</div>
</div>
<style>
#div9{ width: 35vw; height: 10vw; background-image: url("1.jpg");
background-repeat: no-repeat; background-attachment: fixed;}
#div9a{ width: 35vw; height: 10vw; overflow:auto; background-image:
url("1.jpg"); background-repeat: no-repeat; background-attachment: scroll;}
#div9b{ width: 35vw; height: 10vw; overflow:scroll; background-image: url("1.jpg");
background-repeat: no-repeat; background-attachment: local;}
</style>
The background-blend-mode property defines the blending mode of each background layer (color and/or image).The CSS property sets how an element's background images should blend with each other and with the element's background color.Blending modes should be defined in the same order as the "background-image" property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
There can be several property values, separated by commas. The <blend-mode> data type is defined using a keyword value chosen from the list below.
normal: this is default; sets the blending mode to normal.The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping.
multiply: sets the blending mode to multiply. The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping.
screen: sets the blending mode to screen.The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.
overlay: sets the blending mode to overlay. The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped.
darken: sets the blending mode to darken. The final color is composed of the darkest values of each color channel.
lighten: sets the blending mode to lighten. The final color is composed of the lightest values of each color channel.
color-dodge: sets the blending mode to color-dodge. The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to "screen", but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.
color-burn: sets the blending mode to color-burn. The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to "multiply", but the foreground need only be as dark as the inverse of the backdrop to make the final image black.
hard-light: sets the blending mode to hard-light. The final color is the result of "multiply" if the top color is darker, or "screen" if the top color is lighter. This blend mode is equivalent to "overlay" but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop.
soft-light: sets the blending mode to soft-light. The final color is similar to "hard-light", but softer. This blend mode behaves similar to "hard-light". The effect is similar to shining a diffused spotlight on the backdrop.
difference: sets the blending mode to difference. The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color.
exclusion: sets the blending mode to exclusion. The final color is similar to "difference", but with less contrast. As with "difference", a black layer has no effect, while a white layer inverts the other layer's color.
hue: sets the blending mode to hue. The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation: sets the blending mode to saturation. The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.
color: sets the blending mode to color. The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.
luminosity: sets the blending mode to luminosity. The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color, but with the layers swapped.
Choose a blend-mode:
<div class="spec">
<p>Choose a blend-mode:</p>
<div id="one"></div>
<select>
<option selected>normal</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
</div>
<style>
#one{margin-left: 6vw; margin-top:1vw; width: 20vw; height: 20vw; background-color:lightblue;background-image:url('../pics/8.jpg')}
</style>
<script>
const selectElement = document.querySelector('select');
const divElement = document.querySelector('#one');
selectElement.addEventListener('change', () => {
divElement.style.backgroundBlendMode = selectElement.value;
});
</script>
<div>
<div class="divA">Not blended</div>
<div class="divA blender">Blended</div>
<div class="divA test"></div>
<div class="divA blender2"></div>
</div>
<style>
.divA {display: block; margin-left:2vw; width: 8vw; height: 8vw; color: white; font-family: sans-serif; text-align: center;
padding: 1vw; float: left;background-color: red; background-image: url('../pics/1a.jpg'); background-size: cover;}
.blender {background-blend-mode: hard-light;}
.test {background-blend-mode: difference;}
.blender2 {background-blend-mode: luminosity;}
pre{display:grid;}
</style>
The background-clip property defines how far the background (color or image) should extend within an element.
Property values:
border-box : default value. The background extends behind the border
padding-box : the background extends to the inside edge of the border
content-box : the background extends to the edge of the content box
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
sets whether an element's background extends underneath its border box, padding box, or content box.
The background extends behind the border.
The background extends to the inside edge of the border.
The background extends only to the edge of the content box.
The background is clipped to the foreground text.
<div>
<p> sets whether an element's background extends underneath its border
box, padding box, or content box.</p>
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
</div>
<style>
.border-box {border:0.5vw dotted black;padding:1vw; background: linear-gradient(90deg, red, black, yellow, red);
background-clip: border-box; color: white;}
.padding-box { border:0.5vw dotted black;padding:1vw; background: linear-gradient(90deg, red, black, yellow, red);
background-clip: padding-box; color: white;}
.content-box {border:0.5vw dotted black;padding:1vw; background: linear-gradient(90deg, red, black, yellow, red);
background-clip: content-box; color: white;}
.text {border:0.5vw dotted black;padding:1vw; background: linear-gradient(90deg, red, yellow, red);background-clip:
text; -webkit-background-clip: text; color: white;}
</style>
The background extends behind the border.
The background extends to the inside edge of the border.
The background extends to the edge of the content box.
<div class="spec">
<div id="div8"><p>The background extends behind the border.</p></div>
<div id="div8a"><p>The background extends to the inside edge of the border.</p></div>
<div id="div8b"><p>The background extends to the edge of the content box.</p></div>
</div>
<style>
#div8{ width: 28vw; height: 3vw; border: 10px dotted black; padding: 15px; background: lightblue;
background-clip: border-box;}
#div8a{ width: 28vw; height: 3vw; border: 10px dotted black; padding: 15px; background: lightblue;
background-clip: padding-box;}
#div8b{ width: 28vw; height: 3vw; border: 10px dotted black; padding: 15px; background: lightblue;
background-clip: content-box;}
</style>
The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin).
Use a background color and a text color that makes the text easy to read.
Property values:
color : specifies the background color.
transparent : specifies that the background color should be transparent. This is default
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div class="spec">
<div class="exampleone">Some examples to show how back-ground-color works.</div><br>
<div class="exampletwo">Some examples to show how back-ground-color works.</div><br>
<div class="examplethree">Some examples to show how back-ground-color works.</div><br>
</div>
<style>
.exampleone { float:left; padding-left: 0; background-color: transparent; }
.exampletwo {float:left; padding-left: 4vw; background-color: rgb(153,102,153); color: rgb(255,255,204);}
.examplethree {float: left; padding-left: 8vw; background-color: #777799; color: #FFFFFF;}
</style>
the background color can be specified with a color name.
<div class="spec">
<div id="div2"><p>the background color can be specified with a color name.</p></div>
<div id="div2a">background-color is "transparent"</div>
</div>
<style>
#div2{ width: 28vw; height: 5vw; background-color: coral; }
#div2a{ width: 28vw; height: 5vw; background-color: transparent; color:black}
</style>
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.
The background of an element is the total size of the element, including padding and border (but not the margin).
Always set a background-color to be used if the image is unavailable.
Property values:
url : the URL to the image. To specify more than one image, separate the URLs with a comma
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
linear-gradient : sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient : sets a radial gradient as the background image. Define at least two colors (center to edges)
repeating-conic-gradient : repeats a conic gradient
repeating-linear-gradient : repeats a linear gradient
repeating-radial-gradient : repeats a radial gradient
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div class="spec">
<div id="div3">image</div>
<div id="div3a">linear-gradient</div>
<div id="div3b">radial-gradient</div>
<div id="div3c">repeating-linear-gradient</div>
<div id="div3d">repeating-radial-gradient</div>
</div>
<style>
#div3{ width: 28vw; height: 5vw; background-image: url("../pics/2.jpg");background-color: #cccccc; background-repeat:
no-repeat;}
#div3a{ width: 28vw; height: 5vw; background-image: linear-gradient(red, yellow, green);}
#div3b{ width: 28vw; height: 5vw; background-image: radial-gradient(red, yellow, green);}
#div3c{ width: 28vw; height: 5vw; background-image: repeating-linear-gradient(red, yellow 10%,
green 20%);}
#div3d{ width: 28vw; height: 5vw; background-image: repeating-radial-gradient(red, yellow 10%,
green 15%);}
</style>
The background-origin property specifies the origin position (the background positioning area) of a background image.
This property has no effect if background-attachment is "fixed".
Property values:
padding-box : default value. The background image starts from the upper left corner of the padding edge
border-box : the background image starts from the upper left corner of the border
content-box : The background image starts from the upper left corner of the content
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
sets the background's origin: from the border start, inside the border, or inside the padding.
<div class="spec">
<div id="example11"></div><br>
<div id="example22"></div><br>
<div class="divA"></div>
</div>
<style>
#example11{height: 30vh; border: 1vw double; padding: 1vw; background: url('../pics/2.jpg'); background-position: center left;
background-repeat: no-repeat; background-origin: content-box;}
#example22 {height: 30vh; border: 1vw solid black; padding: 1vw; background: url('../pics/3.jpg'); background-repeat: no-repeat;
background-origin: border-box;}
.divA {height: 10vh;background-image: url('../pics/4.jpg'), url('../pics/5.jpg'); /* Applies two images to the background */
background-position: top right, 0px 0px; background-repeat: no-repeat; background-origin: content-box, padding-box;}
</style>
The background image starts from the upper left corner of the padding edge.
The background image starts from the upper left corner of the border.
The background image starts from the upper left corner of the content.
<div class="spec">
<div id="div7"><p>The background image starts from the upper left
corner of the padding edge.</p></div>
<div id="div7a"><p>The background image starts from the upper left
corner of the border.</p></div>
<div id="div7b"><p>The background image starts from the upper left
corner of the content.</p></div>
</div>
<style>
#div7{ width: 28vw; height: 5vw; border: 10px dashed black; padding: 25px;background: url(8.jpg);
background-repeat: no-repeat;background-origin: padding-box; color: aliceblue;}
#div7a{ width: 28vw; height: 5vw; border: 10px dashed black; padding: 25px;background: url(8.jpg);
background-repeat:no-repeat;background-origin: border-box; color: aliceblue;}
#div7b{ width: 28vw; height: 5vw; border: 10px dashed black; padding: 25px;background: url(8.jpg);
background-repeat: no-repeat;background-origin: content-box; color: aliceblue;}
</style>
The background-position property sets the starting position of a background image.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Property values:
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom : if you only specify one keyword, the other value will be "center"
x% y% : the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos : the first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
sets the initial position for each background image.
<div class="spec">
<div class="one">One</div><br>
<div class="two">Two</div><br>
<div class="three">Three</div><br>
</div>
<style>
.one, .two, .three{background-color: #FFEE99; background-repeat: no-repeat; width: 28vw;
height: 10vw; margin-bottom: 1.2vw;}
.one {background: url("../pics/4.jpg") #FFEE99 2.5em bottom no-repeat;}
.two {background: url("../pics/3.jpg") #FFEE99 left 4em bottom 1em no-repeat;}
.three {background-image: url("../pics/2.jpg"), url("5.jpg");
background-position: 0px 0px, right 3em bottom 2em; color:white;}
</style>
<div class="spec">
<div id="div44">left</div>
<div id="div44a"> 20% 50%</div>
</div>
<style>
#div4{ width: 28vw; height: 10vw; background-image: url('../pics/8.jpg');
background-repeat: no-repeat; background-attachment: fixed;
background-position: left; color:black;}
#div4a{ width: 28vw; height: 10vw; background-image: url('../pics/5.jpg');
background-repeat: no-repeat; background-attachment: fixed;
background-position: 20% 50%; color:black;}
</style>
The background-position-x property sets the position of a background image on the x-axis.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Property values:
left : positions background left side on x-axis.
right : positions background right side on x-axis.
center : positions background center on x-axis.
x% : left side is 0% on x-axis, and right side is 100%. Percentage value refers to width of background positioning area minus width of background image.
xpos : horizontal distance from left side. Units can be pixels (0px) or any other CSS units.
xpos offset : two value syntax, only supported in Firefox and Safari.- xpos is set either to "left" or "right". - offset is horizontal distance from background image and "left" or "right" side set with xpos. Units can be pixels or any other CSS units.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div class="grid">
<div id="div_A"></div>
<div id="div_B"></div>
</div>
<style>
#div_A {width: 20vw; height: 20vw; margin: auto; border: solid black 0.2vw;
background-image: url('../pics/smiley.png'); background-repeat: no-repeat;
background-position-x: center;}
#div_B {width: 20vw; height: 20vw; margin: auto; border: solid black 0.2vw;
background-image: url('../pics/smiley.png'); background-repeat: no-repeat;
background-position-x: right;}
</style>
The background-position-x property sets the position of a background image on the y-axis.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Property values:
top : positions background top on y-axis.
bottom : positions background bottom on y-axis.
center : positions background center on y-axis.
y% : top side is 0% on y-axis, and rbottom side is 100%. Percentage value refers to width of background positioning area minus width of background image.
ypos : vertical distance from top side. Units can be pixels (0px) or any other CSS units.
ypos offset : two value syntax, only supported in Firefox and Safari.- xpos is set either to "top" or "bottom". - offset is vertical distance from background image and "top" or "bottom" side set with ypos. Units can be pixels or any other CSS units.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div class="grid">
<div id="div_C"></div>
<div id="div_D"></div>
</div>
<style>
#div_C {width: 20vw; height: 20vw; margin: auto; border: solid black 0.2vw;
background-image: url('../pics/smiley.png'); background-repeat: no-repeat;
background-position-y: center;}
#div_D {width: 20vw; height: 20vw; margin: auto; border: solid black 0.2vw;
background-image: url('../pics/smiley.png'); background-repeat: no-repeat;
background-position-y: bottom;}
</style>
The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. The background image is placed according to the "background-position" property. If no background-position is specified, the image is always placed at the element's top left corner.
Property values:
repeat : the background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default.
repeat-x : the background image is repeated only horizontally.
repeat-y : the background image is repeated only vertically.
no-repeat : the background-image is not repeated. The image will only be shown once.
space : the background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
round : the background-image is repeated and squished or stretched to fill the space (no gaps).
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
syntax examples
Keyword values:
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
Two-value syntax: horizontal | vertical:
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
Global values:
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
The "one-value" syntax is a shorthand for the full "two-value" syntax. In the "two-value" syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior.
<div id="repeat"></div>
<style>
#repeat{width: 30vw; height: 30vw; background-image:url('../pics/1S.jpg');
background-repeat: repeat; margin-left: 10vw; }
</style>
<div id="repeat-x"></div>
<style>
#repeat-x{width: 30vw; height: 10vw; background-image:url('1S.jpg');
background-repeat: repeat-x; margin-left: 10vw;}
</style>
<div id="repeat-y"></div>
<style>
#repeat-y{width: 30vw; height: 30vw; background-image:url('../pics/1S.jpg');
background-repeat: repeat-y; margin-left: 1vw;}
</style>
<div id="space"></div>
<style>
#space{width: 30vw; height: 30vw; background-image:url('../pics/1S.jpg');
background-repeat: space; margin-left: 1vw;}
</style>
<div id="round"></div>
<style>
#round{width: 30vw; height: 30vw; background-image:url('../pics/1S.jpg');
background-repeat: round; margin-left: 1vw;}
</style>
<div id="no-repeat"> /div>
<style>
#no-repeat{width: 30vw; height: 10vw; background-image:url('../pics/1S.jpg');
background-repeat: no-repeat; margin-left: 1vw;}
</style>
<div id="initial"></div>
<style>
#initial{width: 30vw; height: 30vw; background-image:url('../pics/1S.jpg');
background-repeat: initial; margin-left: 1vw;}
</style>
<div id="alpha"></div>
<style>
#alpha{ background-image:url('1S.jpg'), url('../pics/2S.jpg');
background-repeat: repeat-x, repeat-y; height: 30vw; width: 30vw;
margin-left: 1vw;}
</style>
<div id="beta"></div>
<style>
#beta{ background-image:url('1S.jpg'), url('../pics/2S.jpg');
background-repeat: no-repeat, repeat; height: 20vw; width: 30vw;
margin-left: 1vw;}
</style>
<div id="gamma"></div>
<style>
#gamma{ background-image:url('../pics/1S.jpg'), url('../pics/2S.jpg');
background-repeat: repeat-x, space; height: 20vw; width: 30vw;
margin-left: 4vw;}
</style>
<div id="delta"></div>
<style>
#delta{ background-image:url('../pics/1S.jpg'), url('../pics/2S.jpg');
background-repeat: round, space; height: 20vw; width: 30vw;
margin-left: 4vw;}
</style>
<div id="epsulon"></div>
<style>
#epsulon{ background-image:url('1S.jpg'), url('2S.jpg');
background-repeat: no-repeat, space; height: 20vw; width: 30vw; margin-left: 4vw;}
</style>
The background-size property specifies the size of the background images.There are four different syntaxes you can use with this property:
keyword; syntax: "auto", "cover" and "contain".
one-value; syntax: sets the width of the image (height becomes "auto").
two-value; syntax: first value: width of the image; second value: height.
multiple background; syntax: separated with comma .
Property values:
auto : default value; the background image is displayed in its original size.
length : sets the width and height of the background image; the first value sets the width, the second value sets the height; if only one value is given, the second is set to "auto".
percentage : sets the width and height of the background image in percent of the parent element; the first value sets the width, the second value sets the height; if only one value is given, the second is set to "auto".
cover : resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain : resize the background image to make sure the image is fully visible
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
syntax examples:
/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: unset;
The background image is displayed in its original size.
Here, the background image is set to 30vw wide and 10vw high.
Codes:
<style>
#example1 {margin-left:4vw; border: 0.2vw solid black; padding: 2.5vw;
background: url(../pics/1.jpg); background-repeat: no-repeat;
background-size: auto; color: pink}
#example2 {margin-left:4vw;; border: 0.2vw solid black; padding: 2.5vw;
background: url(../pics/1.jpg); background-repeat: no-repeat;
background-size: 30vw 10vw; color: red;}
</style>
<h4>background-size: auto (default):</h4>
<div id="example1">
<h4>Hello World</h4>
<p class="spec">The background image is displayed in its original size.</p>
</div>
<h4>background-size: 30vw 10vw:</h4>
<div id="example2">
<h4>Hello World</h4>
<p class="spec">Here, the background image is set to 30vw wide and 10vw high.</p>
</div>
Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover".
Codes:
<style>
#example3 {margin-left:4vw; border: 0.2vw solid black; padding: 2.5vw;
background: url(../pics/1.jpg), url(../pics/car2.jpg);
background-repeat: no-repeat; background-size: contain, cover;
color:red;}
</style>
<h4>background-size: contain, cover:</h4>
<div id="example3">
<h4>Hello World</h4>
<p class="spec">Here we have two background images. We specify the size of the first
background image with "contain", and the second background-image with "cover".</p>
</div>
<div class="spec">
<div id="div5">auto</div>
<div id="div5a">500px 200px</div>
<div id="div5b">percentage 75% 50%</div>
<div id="div5c">cover</div>
<div id="div5d">contain</div>
<div id="div5e">contain, cover</div>
</div>
<style>
#div5{ width: 28vw; height: 5vw; border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg); background-repeat: no-repeat;
background-size: auto; color: aliceblue;}
#div5a{ width: 28vw; height: 5vw; border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg); background-repeat: no-repeat;
background-size: 500px 200px; color: aliceblue; }
#div5b{ width: 28vw; height: 5vw; border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg); background-repeat: no-repeat;
background-size: 75% 50%; color: aliceblue; }
#div5c{ width: 28vw; height: 5vw;border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg); background-repeat: no-repeat;
background-size: cover; color: aliceblue; }
#div5d{ width: 28vw; height: 5vw;border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg); background-repeat: no-repeat;
background-size: contain; color: aliceblue; }
#div5e{ width: 28vw; height: 5vw;border: 2px solid black; padding: 25px;
background: url(../pics/5.jpg), url(../pics/8.jpg);
background-repeat: no-repeat; background-size: contain, cover;
color: aliceblue; }
</style>