The background-color property sets the background color of an element. You can use the same color value formats as mentioned in colors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color</title>
</head>
<body>
<section>
<h1>Welcome to JTC</h1>
<p>Here's an example of Background Color</p>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
section{
background-color: lightcoral;
}
Use the background-image property to add an image to the background of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background Image</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of Background Image</p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
body{
background-image: url("background.jpg");
}
The background-repeat property in CSS determines how a background image is repeated within an element's background area. It controls whether and how the background image is tiled to cover the entire background space.
Here are the possible values for the background-repeat property:
• repeat: The default value. The background image is tiled both horizontally and vertically to cover the entire background area.
• repeat-x: The background image is tiled only horizontally, repeating along the x-axis.
• repeat-y: The background image is tiled only vertically, repeating along the y-axis.
• no-repeat: The background image is not repeated. It appears only once in the background area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background Repeat</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of Background Repeat </p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: red;
}
body{
background-image: url("Learn_HTML.jpg");
background-repeat: repeat-x;
}
The background-attachment property in CSS controls whether a background image scrolls with the content of an element or remains fixed as the content is scrolled. It defines how the background image behaves in relation to the viewport and the element's content.
There are two main values for the background-attachment property:
scroll: The default value. The background image scrolls with the content as the element is scrolled.
fixed: The background image remains fixed in place, even as the element's content is scrolled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background attachment</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of Background attachment </p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
<p>Scroll to see the fixed background image attachment.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
body{
background-image: url("bg_small_1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
The background-position property in CSS allows you to control the initial placement or alignment of a background image within its containing element. It specifies both the horizontal and vertical positioning of the background image. The property accepts values that define where the background image starts relative to the element's top left corner.
Common Values
• Keywords:left, center, right, top, bottom.
• Percentages: Values between 0% and 100%, representing the position relative to the element's dimensions.
• Length Values: Measurements in pixels (px) or other length units.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background Position</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of Background Position</p>
<p>The background-position property is particularly useful when you need to precisely position a background image within an element. It allows you to achieve various visual effects and layouts by controlling how the image aligns with the element's content. </p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
body{
background-image: url("bg_small.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
The background-size property in CSS allows you to control the size of a background image within its containing element. It determines how the image is scaled or cropped to fit the background area. The background-size property accepts various values that define how the image is displayed.
Common Values
• Keywords:auto, cover, contain.
• Percentages: Values between 0% and 100%, relative to the element's dimensions.
• Length Values: Measurements in pixels (px) or other length units.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background Size</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of Background size</p>
<p>The background-size property is useful when you want to adjust how a background image fits within an element.By choosing an appropriate value,you can control whether the image scales to cover the element,scale to fit without cropping or is displayed at its original size.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
body{
background-image: url("bg_small.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 70%;
}
The background shorthand property in CSS allows you to combine multiple background-related properties into a single declaration. It's a convenient way to set background images, colors, positions, sizes, and other background-related properties in a single line of code. The order of the values matters, and you can omit values you don't need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Background Shorthand</title>
</head>
<body>
<div class="bg">
<h2>Welcome to JTC</h2>
<p>Here's an example of Background Shorthand using multiple values.</p>
<p>url("bg_new.jpg") sets the background image. <br>
center positions the image at the horizontal center. <br>
/ cover scales the image to cover the entire background area. <br>
no-repeat prevents the image from repeating. <br>
#f2f2f2 sets the background color.
</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.bg{
padding: 50px;
background: url("bg_new.jpg") center / cover no-repeat #f2f2f2;
}
