Tag: background

Web development

CSS background Property

Post author By Lena Stanley
Post date August 23, 2021

The CSS background property is a shorthand property for:

background-color property

background-image property

background-position property

background-size property

background-repeat property

background-origin property

background-clip property

background-attachment property

Syntax:

background: background-color background-image position/background-size background-repeat background-origin background-clip background-attachment;

background-color – defines the background color to be used.

background-image – defines one or more background images to be used.

background-position – defines the position of the background images.

background-size – defines the size of the background images.

background-repeat – defines how to repeat the background images.

background-origin – defines the positioning area of the background images.

background-clip – defines the painting area of the background images.

background-attachment – defines whether the background images are fixed or scrolls with the rest of the page.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background: #fec5bb url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640") no-repeat fixed center; 
  height: 200vh;
}
</style>
</head>
<body>

<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS Reference

CSS Advanced

Tags background, CSS

Web development

CSS background-size Property

Post author By Lena Stanley
Post date August 23, 2021

The CSS background-size property defines the size of the background images.

Demo:

Syntax:

background-size: auto|length|cover|contain;

auto (default) – the background image is displayed in its original size.

length – Settles the width and height of the background image. The first value sets the width, the second value sets the height.

cover – resize the background image to cover the entire container.

contain – resize the background image to make sure the image is fully visible.

Example:

Define the size of a background image with “cover”:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 2px solid black;
  padding: 35px;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/07/desklamp.gif);
  background-repeat: no-repeat;
  background-size: cover;
  width: 580px;
  color: white;
}
</style>
</head>
<body>

<div id="example1">
  <h4>Hello World</h4>
  <p>Some text...</p>
</div>

</body>
</html>

Output:

Hello World

Some text…

Enjoy coding!

Read also:

CSS background-attachment Property

CSS background-blend-mode Property

Tags background, background-size, CSS

Web development

CSS background-repeat Property

Post author By Lena Stanley
Post date August 23, 2021

The CSS background-repeat property settles if/how a background image will be repeated.

Demo:

Syntax:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|space|round;

repeat (default) – the background image is repeated both vertically and horizontally (the last image will be clipped if it does not fit).

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.

round – the background-image is repeated and squished or stretched to fill the space (no gaps).

Example:

Repeat a background image only horizontally:

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  border: 3px solid #333;
  width: 300px;
  height: 150px;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/06/icon.png');
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<div id="myDIV">
</div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS background-origin Property

CSS background-image Property

CSS Reference

Tags background, background-repeat, CSS

Web development

CSS background-position Property

Post author By Lena Stanley
Post date August 23, 2021

The CSS background-position property settles the starting position of a background image.

Demo:

Syntax:

background-position: value;

left top/ left center/ left bottom/ right top/ right center/ right bottom/ center top/ center center/ center bottom – if you only define one keyword, the other value will be “center”.

x% y% (default 0%, 0%) – 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 define one value, the other value will be 50%.

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 any CSS units).

Example:

How to position a background-image to be centered:

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  border: 3px solid #333;
  width: 300px;
  height: 150px;
  background: url('https://lenadesign.org/wp-content/uploads/2021/06/icon.png') no-repeat;
  background-position: center center;
}
</style>
</head>
<body>

<div id="myDIV"></div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS background-origin Property

CSS background-image Property

CSS background-color Property

Tags background, background-position, CSS

Web development

CSS background-origin Property

Post author By Lena Stanley
Post date August 16, 2021

The CSS background-origin property defines the origin position (the background positioning area) of a background image.

Demo:

Syntax:

background-origin: padding-box|border-box|content-box;

padding-box (default) – 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.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#example-1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: content-box;
}

#example-2 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example-3 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
}
</style>
</head>
<body>

<h4>background-origin: content-box;</h4>
<div id="example-1">
  <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

<h4>background-origin: border-box;</h4>
<div id="example-2">
   <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

<h4>background-origin: padding-box; </h4>
<div id="example-3">
   <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

</body>
</html>

Output:

background-origin: content-box;

Some text…some text…some text..some text…

background-origin: border-box;

Some text…some text…some text..some text…

background-origin: padding-box;

Some text…some text…some text..some text…

Enjoy coding!

Read also:

CSS background-image Property

CSS Reference

Tags background, background-origin, CSS

Web development

CSS background-image Property

Post author By Lena Stanley
Post date August 16, 2021

The CSS background-image property settles one or more background images for an element.

Note: By default, a background-image is placed at the top-left corner of an element, and is repeated horizontally and vertically.

Syntax:

background-image: url|none;

none (default) – background image will not be displayed.

url – the URL to the image.

linear-gradient() – settles a linear gradient as the background image.

radial-gradient() – settles a radial gradient as the background image.

repeating-linear-gradient() – repeats a linear gradient.

repeating-radial-gradient() – repeats a radial gradient.

Example1:

Settles a background-image for the <body> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fec5bb;
  background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  height: 200vh;
}
</style>
</head>
<body>

<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>

</body>
</html>

Output:

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640"), url("https://lenadesign.org/wp-content/uploads/2021/07/2a-1024x576.jpg");
  background-repeat: no-repeat, repeat;
  background-color: #edf2f4;
}
</style>
</head>
<body>
</body>
</html>

Output:

Settles two background images for the <body> element.

Example3:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
  position: relative;
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to right, yellow , green);
}
</style>
</head>
<body>

<div id="gradient-1"></div>

</body>
</html>

Output:

Settles a linear-gradient as a background image for a <div> element:

Enjoy coding!

Read also:

CSS background-color Property

CSS Reference

Tags background, background-image, CSS

Web development

CSS background-color Property

Post author By Lena Stanley
Post date August 12, 2021

The CSS background-color property settles the background colour of an element.

Syntax:

background-color: color|transparent;

color – defines the background color (in HEX, RGB, RGBA, HSL values).

transparent (default) – defines that the background color should be transparent.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.square {
   position: relative;
   width: 100px;
   height: 100px;
   background-color: #2a9d8f;
    }

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Enjoy coding!

Read also:

CSS border-top Property

CSS border-image Property

Tags background, background-color, CSS

Web development

CSS background-clip Property

Post author By Lena Stanley
Post date August 12, 2021

The CSS background-clip property specifies how far the background (colour/ or image) should extend within an element.

Demo:

Syntax:

background-clip: border-box|padding-box|content-box;

border-box (default) – 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.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
    
#example-1, #example-2, #example-3 {
   border: 5px dashed black;
   padding: 20px;
   background-color: #fed9b7;
    }
#example-1 {
  background-clip: border-box;  
}

#example-2 { 
  background-clip: padding-box;
}

#example-3 {
  background-clip: content-box;
}
</style>
</head>
<body>

<p>background-clip: border-box;</p>
<div id="example-1">
  <p>The background extends behind the border.</p>
</div>

<p>background-clip: padding-box;</p>
<div id="example-2">
  <p>The background extends to the inside edge of the border.</p>
</div>

<p>background-clip: content-box;</p>
<div id="example-3">
  <p>The background extends to the edge of the content box.</p>
</div>

</body>
</html>

Output:

background-clip: border-box;

The background extends behind the border.

background-clip: padding-box;

The background extends to the inside edge of the border.

background-clip: content-box;

The background extends to the edge of the content box.

Enjoy coding!

Read also:

CSS background-size Property

CSS background-position Property

Tags background, background-clip, CSS

Web development

CSS background-attachment Property

Post author By Lena Stanley
Post date August 12, 2021

The CSS background-attachment property settles whether a background image is fixed or scrolls with the rest of the page.

Demo:

Syntax:

background-attachment: scroll|fixed|local;

scroll (default) – the background image scrolls with the page.

fixed – the background image won’t scroll with the page.

local – the background image scrolls with the element’s contents.

Example1: Scroll

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background-color: #fec5bb;
  background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  height: 200vh;
}
</style>
</head>
<body>

<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>

</body>
</html>

Output:

Example2: Fixed

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background-color: #fec5bb;
  background-image: url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 200vh;
}
</style>
</head>
<body>

<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>

</body>
</html>

Output:

By using CSS background-attachment property (fixed) you can create a parallax scrolling effect (create an illusion of 3D depth):

*to see the CSS parallax scrolling effect tutorial click here.

Enjoy coding!

Read also:

CSS Sticky Element

CSS & JavaScript Sliding Push Menu/ Navigation

Tags background, background-attachment, CSS