CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
LIST OF EXPERIMENTS
Experiment 1: Basic Background Color
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1</title>
<style>
body {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment sets the background color of the <body> element to a light gray color
(#f0f0f0).
Experiment 2: Background Image
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 2</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
</body>
</html>
Explanation:
In this experiment, we set a background image for the <body> element. The image will not
repeat (background-repeat: no-repeat) and will cover the entire element (background-size:
cover).
Experiment 3: Background Attachment
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 3</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By adding background-attachment: fixed, the background image will remain fixed when
scrolling, creating a parallax effect.
Experiment 4: Background Gradient
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 4</title>
<style>
body {
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
background: linear-gradient(to right, #ff0000, #0000ff);
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment applies a linear gradient background from left to right, starting with a red
color (#ff0000) and ending with blue (#0000ff).
Experiment 5: Multiple Background Images
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 5</title>
<style>
body {
background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
background-repeat: no-repeat, repeat-x;
background-position: top left, bottom right;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment adds multiple background images to the <body> element. The first image
will not repeat, and the second image will repeat only horizontally. The first image will be
positioned at the top left, and the second image will be positioned at the bottom right.
Experiment 6: Background Origin - Padding Box
Code:
html
Copy code
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<!DOCTYPE html>
<html>
<head>
<title>Experiment 6</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-origin: padding-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By setting background-origin: padding-box, the background image will start from the
padding edge of the element. It will not include the border or margin.
Experiment 7: Background Origin - Content Box
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 7</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-origin: content-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
With background-origin: content-box, the background image will start from the content edge
of the element, excluding padding and border.
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Experiment 8: Background Origin - Border Box
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 8</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-origin: border-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By setting background-origin: border-box, the background image will start from the border
edge of the element, including padding but not extending into the margin.
Experiment 9: Combined Background Properties
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 9</title>
<style>
body {
background: url('path/to/image.jpg') no-repeat top left / cover fixed;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Explanation:
This experiment combines various background properties in one line. It sets a background
image, prevents it from repeating (no-repeat), positions it at the top left corner, resizes it to
cover the entire element, and keeps it fixed when scrolling.
Experiment 10: Gradient with Background Origin
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 10</title>
<style>
body {
background: linear-gradient(to bottom right, #ff0000, #0000ff) padding-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines a linear gradient background with background-origin: paddingbox. The gradient will be contained within the padding area of the element.
Experiment 11: Nested Backgrounds with Different Origins
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 11</title>
<style>
.container {
background-image: url('path/to/image.jpg');
background-origin: content-box;
padding: 20px;
}
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
.inner {
background-color: #f0f0f0;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<h1>Hello, CSS3!</h1>
</div>
</div>
</body>
</html>
Explanation:
This experiment creates a container with a background image originating from the content
box and a padding of 20px. Inside the container, there's an inner div with a background color
(#f0f0f0). The background image will only be visible within the content box of the container,
while the background color extends to the padding box.
Experiment 12: Background Clip
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 12</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-clip: padding-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By using background-clip: padding-box, the background image will be clipped to the padding
box of the element, similar to background-origin: padding-box.
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Experiment 13: Background Attachment & Origin Combination
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 13</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-attachment: fixed;
background-origin: border-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines background-attachment: fixed with background-origin: borderbox. The background image will be fixed when scrolling and start from the border edge of the
element, extending into the padding but not the margin.
Experiment 14: Background Gradient and Padding
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 14</title>
<style>
body {
background: linear-gradient(to right, #ff0000, #0000ff) 20px;
}
</style>
</head>
<body>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines a linear gradient background with a padding value (20px). The
gradient will start from the content edge and extend into the padding area by 20 pixels.
Experiment 15: Background Image Scaling and Size
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 15</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-size: 100px 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
With background-size: 100px 50px, the background image will be resized to a width of 100
pixels and a height of 50 pixels.
Experiment 16: Background Image and Multiple Origins
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 16</title>
<style>
body {
background-image: url('path/to/image.jpg');
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
background-origin: content-box, padding-box;
background-clip: padding-box, border-box;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses multiple backgrounds with different origins and clips. The first
background originates from the content box and is clipped to the padding box. The second
background originates from the padding box and is clipped to the border box.
Experiment 17: Using background-origin with box-shadow
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 17</title>
<style>
body {
background-origin: content-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By setting background-origin: content-box, the box shadow will appear behind the content
area but outside the padding area.
Experiment 18: Background Image with Border Radius
Code:
html
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 18</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-origin: content-box;
border-radius: 50%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment applies a background image to a circular element using border-radius: 50%.
The background image originates from the content box and is clipped to the content box as
well.
Experiment 19: Background Repeat & Position Shorthand
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 19</title>
<style>
body {
background: url('path/to/image.jpg') repeat-x 10px 20px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Explanation:
This experiment combines background repeat (repeat-x) and background position (10px
20px) into a shorthand property.
Experiment 20: Using background-origin and background-size
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 20</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-origin: border-box;
background-size: contain;
padding: 20px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
By setting background-origin: border-box and background-size: contain, the background
image will fit within the border box of the element while maintaining its aspect ratio.
Experiment 21: Background Image and Background Color
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 21</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-color: #f0f0f0;
}
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines a background image with a background color. If the image fails to
load or is transparent, the background color will be visible.
Experiment 22: Gradients with Multiple Colors
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 22</title>
<style>
body {
background: linear-gradient(to bottom, red, yellow, green, blue);
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses a linear gradient with multiple colors. The gradient starts with red at the
top and transitions to yellow, green, and blue at the bottom.
Experiment 23: Radial Gradient
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 23</title>
<style>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
body {
background: radial-gradient(circle, red, yellow);
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
The radial gradient creates a circular gradient that starts with red at the center and transitions
to yellow at the edges.
Experiment 24: Repeating Radial Gradient
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 24</title>
<style>
body {
background: repeating-radial-gradient(circle, red, yellow 20px);
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses a repeating radial gradient with red at the center, transitioning to
yellow, and repeating every 20 pixels.
Experiment 25: Background Attachment & Local URL
Code:
html
Copy code
<!DOCTYPE html>
<html>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<head>
<title>Experiment 25</title>
<style>
body {
background-image: url('#elementID');
background-attachment: local;
}
#elementID {
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="elementID">
<h1>Hello, CSS3!</h1>
</div>
</body>
</html>
Explanation:
In this experiment, we use a local URL (#elementID) to refer to an element with the ID
elementID. The element has its own background image and properties, which is then used as
the background for the body element using background-attachment: local.
Experiment 26: Background with Base64-encoded Image
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 26</title>
<style>
body {
background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses a base64-encoded image as the background for the body element. The
encoded image is directly embedded in the CSS.
Experiment 27: Background with linear-gradient and radial-gradient
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 27</title>
<style>
body {
background: linear-gradient(to right, #ff0000, #00ff00), radial-gradient(circle, #0000ff,
#ffffff);
background-blend-mode: multiply;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines a linear gradient from red to green (left to right) with a radial
gradient from blue to white. The background-blend-mode property is used to blend the
gradients using the multiply mode.
Experiment 28: Custom Background Pattern
Code:
html
Copy code
<!DOCTYPE html>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<html>
<head>
<title>Experiment 28</title>
<style>
body {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22
http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height
%3D%22200
%22%3E%3Cpath%20d%3D%22M0%200h200v200H0z%20M100%200v200M0%20100h2
00%22%20fill%3D%22none
%22%20stroke%3D%22%23f0f0f0%22%20strokewidth%3D%222%22%2F%3E%3C%2Fsvg%3E');
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we create a custom background pattern using an SVG image encoded in
the data:image/svg+xml format. The pattern consists of intersecting diagonal lines forming a
grid.
Experiment 29: Animated Background Gradient
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 29</title>
<style>
body {
background: linear-gradient(to right, red, blue);
animation: gradientAnimation 5s infinite alternate;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
}
100% {
background-position: 100% 50%;
}
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment creates an animated background gradient that transitions back and forth
between red and blue colors. The animation property is used to control the animation, and
@keyframes are used to define the animation sequence.
Experiment 30: Radial Gradient as Background with Text
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 30</title>
<style>
body {
background: radial-gradient(circle, #ff0000, #ffffff);
color: #ffffff;
text-align: center;
padding: 50px;
}
h1 {
background: -webkit-linear-gradient(#fff, #000);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Explanation:
In this experiment, we apply a radial gradient background to the body with a red center and
white edges. The text color is set to white, and we use -webkit-linear-gradient to create a
gradient background for the text, making it transparent, but the gradient shows through.
Experiment 31: background-origin and background-clip with Rounded Borders
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 31</title>
<style>
.container {
background-image: url('path/to/image.jpg');
background-origin: content-box;
background-clip: padding-box;
padding: 20px;
border-radius: 30px;
}
.inner {
background-color: #f0f0f0;
height: 200px;
border-radius: inherit;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<h1>Hello, CSS3!</h1>
</div>
</div>
</body>
</html>
Explanation:
This experiment combines background-origin and background-clip properties with rounded
borders. The .container element has a background image originating from the content box and
clipped to the padding box. The .inner element has a background color, and its border-radius
is set to inherit from the parent, giving both elements rounded corners.
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Experiment 32: Gradient as Background with Transparency
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 32</title>
<style>
body {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
url('path/to/image.jpg');
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we use a linear gradient with transparency as the background, overlaying
it on top of a background image. The gradient creates a semi-transparent red-to-blue
transition.
Experiment 33: Combination of Radial Gradient and Background Image
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 33</title>
<style>
body {
background: radial-gradient(circle, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
url('path/to/image.jpg');
background-size: cover;
}
</style>
</head>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment combines a radial gradient with transparency as the background, overlaying
it on top of a background image. The gradient creates a semi-transparent red-to-blue circular
transition.
Experiment 34: Multiple Backgrounds and Layering
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 34</title>
<style>
body {
background: url('path/to/image.jpg') top left / cover no-repeat,
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)) top left / cover norepeat;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses multiple backgrounds, with a background image placed below a linear
gradient. The background property is used to specify the multiple backgrounds and their
layering order.
Experiment 35: Textured Background with background-size
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<title>Experiment 35</title>
<style>
body {
background-image: url('path/to/texture.png');
background-size: 50px 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we use a texture image as the background and set its size to 50px by 50px.
The texture will repeat across the background.
Experiment 36: Gradients with Text
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 36</title>
<style>
body {
background: linear-gradient(to right, red, yellow, green, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we apply a linear gradient to the background of the body, and then use webkit-background-clip: text to apply the gradient as a background for the text. The text
color is set to transparent to make the gradient show through.
Experiment 37: Animated Background with CSS @keyframes
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 37</title>
<style>
body {
background-color: #f0f0f0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
background-color: #f0f0f0;
}
50% {
background-color: #ff0000;
}
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment creates a pulsating background animation using CSS @keyframes. The pulse
animation changes the background color between light gray (#f0f0f0) and red (#ff0000)
repeatedly.
Experiment 38: Gradient as Background and mix-blend-mode
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 38</title>
<style>
body {
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
background: linear-gradient(to right, red, blue), url('path/to/image.jpg');
background-blend-mode: overlay;
background-size: cover;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses a linear gradient as the background and overlays it on top of a
background image using background-blend-mode: overlay. The gradient creates a red-to-blue
transition.
Experiment 39: Animated Background with Multiple Gradients
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 39</title>
<style>
body {
background: linear-gradient(to right, red, yellow, green, blue),
linear-gradient(to left, red, yellow, green, blue);
background-size: 200% 100%;
background-position: 100% 0;
animation: gradientAnimation 5s linear infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment uses two linear gradients applied to the background, creating two color
bands. The background-size property is set to 200% 100% to allow both gradients to cover
the entire width. The animation property is used to animate the background-position from
right to left, creating a smooth color transition.
Experiment 40: Text as Gradient Background
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 40</title>
<style>
body {
background: url('path/to/image.jpg');
}
h1 {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 36px;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we set a background image for the body and create a gradient background
for the text. The background-clip is set to text, making the gradient show through the text.
The text color is set to transparent to achieve the effect.
Experiment 41: Image as Background with object-fit
Code:
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 41</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
img {
display: block;
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<img src="path/to/image.jpg" alt="Image">
</body>
</html>
Explanation:
This experiment uses an image as the background for the body element. Additionally, we
have an <img> element that behaves like a background image within its container using
object-fit: cover. The object-fit property ensures that the image scales to cover the entire
container, similar to background-size: cover.
Experiment 42: background-attachment and Parallax Scrolling
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 42</title>
<style>
body {
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
background-image: url('path/to/image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.content {
padding: 100px;
background-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="content">
<h1>Hello, CSS3!</h1>
<p>Scroll down to see the parallax effect.</p>
</div>
</body>
</html>
Explanation:
This experiment creates a parallax effect by using background-attachment: fixed on the
background image. As you scroll down, the content will scroll over the fixed background,
creating a sense of depth and motion.
Experiment 43: Background Image and Gradients Combination
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 43</title>
<style>
body {
background: url('path/to/image.jpg') top center / cover no-repeat,
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
color: #ffffff;
padding: 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
</body>
</html>
Explanation:
In this experiment, we use a background image as well as a linear gradient as the background
of the body. The background property is used to specify both backgrounds. The image is
positioned at the top center, covers the entire area, and doesn't repeat. The gradient is applied
on top of the image, creating a semi-transparent overlay effect.
Experiment 44: background-origin and background-clip with Text
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 44</title>
<style>
body {
background: linear-gradient(to bottom, red, blue);
}
h1 {
font-size: 72px;
color: #ffffff;
background-origin: content-box;
background-clip: content-box;
padding: 20px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we apply a linear gradient to the background of the body. The <h1>
element has its background color set to the gradient using background-origin: content-box
and background-clip: content-box, making the gradient confined to the content box of the
text.
Experiment 45: Custom Pattern as Background
Code:
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 45</title>
<style>
body {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22
http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height
%3D%22200
%22%3E%3Cpath%20d%3D%22M0%200h200v200H0z%20M100%200v200M0%20100h2
00%22%20fill%3D%22none
%22%20stroke%3D%22%23ff0000%22%20strokewidth%3D%222%22%2F%3E%3C%2Fsvg%3E');
background-size: 50px 50px;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we create a custom background pattern using an SVG image. The pattern
consists of intersecting diagonal lines forming a grid, and it's used as the background for the
body element.
Experiment 46: Background and Gradient Combination with Text
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 46</title>
<style>
body {
background: url('path/to/image.jpg') top center / cover no-repeat,
linear-gradient(to right, red, blue);
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
color: #ffffff;
padding: 50px;
}
h1 {
font-size: 72px;
color: transparent;
background: -webkit-linear-gradient(#fff, #000);
-webkit-background-clip: text;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we apply a background image to the body element as well as a linear
gradient. The image is positioned at the top center and covers the entire area. The gradient is
applied to the text using -webkit-background-clip: text, making the gradient visible through
the text.
Experiment 47: Textured Background with Background Image
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 47</title>
<style>
body {
background-image: url('path/to/texture.png'), url('path/to/image.jpg');
background-size: 50px 50px, cover;
background-repeat: repeat, no-repeat;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
In this experiment, we use both a texture image and a background image for the body
element. The texture is set to repeat, while the background image covers the area.
Experiment 48: Background Image and background-attachment: local
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 48</title>
<style>
body {
background-image: url('path/to/image.jpg');
background-attachment: local;
}
.container {
width: 300px;
height: 300px;
background-image: url('path/to/image.jpg');
background-attachment: scroll;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, CSS3!</h1>
</div>
</body>
</html>
Explanation:
In this experiment, we use two different background images: one for the body element with
background-attachment: local and another for the .container element with backgroundattachment: scroll. The .container element covers the background image in the body and
scrolls independently.
Experiment 49: Complex Background with Multiple Gradients and Image
Code:
html
Copy code
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<!DOCTYPE html>
<html>
<head>
<title>Experiment 49</title>
<style>
body {
background: linear-gradient(to right, red, blue),
radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.7)),
url('path/to/image.jpg');
background-size: 100% 100%, cover, cover;
background-repeat: no-repeat;
background-position: top left, center center, center center;
}
</style>
</head>
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
This experiment creates a complex background by combining multiple gradients and an
image. The first gradient is a linear gradient from red to blue, the second gradient is a radial
gradient from transparent to semi-transparent, and the third background is an image. Each
background element is carefully positioned and sized to achieve the desired effect.
Experiment 50: Multiple Background Images and Positioning
Code:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Experiment 50</title>
<style>
body {
background: url('path/to/image1.jpg') top left / cover no-repeat,
url('path/to/image2.jpg') top right / cover no-repeat,
url('path/to/image3.jpg') bottom left / cover no-repeat,
url('path/to/image4.jpg') bottom right / cover no-repeat;
}
</style>
</head>
CSS PROGRAMMING
Topic – CSS BACKGROUND-ORIGIN
<body>
<h1>Hello, CSS3!</h1>
</body>
</html>
Explanation:
In this experiment, we use multiple background images for the body element, each positioned
at different corners of the body using top left, top right, bottom left, and bottom right. The
background-size is set to cover for all images, ensuring they cover the entire area without
repeating.
