Lecture Notes Of Class 4: Background Properties
Objective:
Learn how to apply and manage background properties in CSS.
Topics
Covered:
1. background-color:
o
This property sets the background color of an
element.
o
Syntax:
css
Copy code
element {
background-color: color;
}
o
Example:
css
Copy code
body {
background-color: lightblue;
}
This sets a light blue background
for the entire page.
2. background-image:
o
This property sets an image as the background of an
element.
o
Syntax:
css
Copy code
element {
background-image: url('image-path');
}
o
Example:
css
Copy code
body {
background-image: url('background.jpg');
}
This applies the image background.jpg
as the background of the page.
3. background-repeat:
o
This property controls the repetition of the
background image.
o
Possible values:
§ repeat:
Repeats the image both horizontally and vertically (default).
§ repeat-x:
Repeats the image horizontally.
§ repeat-y:
Repeats the image vertically.
§ no-repeat:
Does not repeat the image.
o
Syntax:
css
Copy code
element {
background-repeat: value;
}
o
Example:
css
Copy code
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
}
This ensures the image is shown
only once and not repeated.
4. background-size:
o
This property allows you to control the size of the
background image.
o
Possible values:
§ auto:
Default value (keeps the image’s original size).
§ cover:
Scales the background image to cover the entire element’s area, maintaining the
aspect ratio.
§ contain:
Scales the background image to fit within the element’s area while maintaining
the aspect ratio.
§ Syntax:
css
Copy code
element {
background-size: value;
}
o
Example:
css
Copy code
body {
background-image: url('background.jpg');
background-size: cover;
}
This scales the background image
to cover the entire background of the element, regardless of its size.
Lab
Exercise:
Task:
Create a webpage with a background image and customize its size and position.
Steps:
1. Create a
new HTML file and link a CSS stylesheet.
2. In the
CSS file, set the background image using the background-image property.
3. Customize
the background size using background-size.
4. Position
the background image by using background-position.
5. Ensure
that the background does not repeat using background-repeat.
Example:
HTML:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Background Properties</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a webpage with a background
image.</p>
</body>
</html>
CSS (styles.css):
css
Copy code
body {
background-image: url('background.jpg');
background-size: cover; /* Cover the entire background */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
color: white;
/* Set text color to white for contrast */
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.5em;
}
This will create a webpage with a
background image that covers the entire page, is centered, and does not repeat.
The text color is white to ensure good visibility against the background image.
No comments:
Post a Comment