Assignments Of Class 4: Background Properties
Assignment 1: Apply a Solid Background Color
Objective:
Learn how to set a solid background color for a webpage.
Steps:
1. Create a new HTML file.
2. Link a CSS file to the HTML file.
3. Use the background-color property to apply a solid background color to the <body> tag.
Solution:
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>Solid Background Color</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This webpage has a solid background color.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-color: lightgreen; /* Set solid background color */
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
Assignment 2: Set a Background Image
Objective:
Learn how to set an image as the background of a webpage.
Steps:
1. Create a new HTML file and link a CSS file.
2. Use the background-image property in the CSS file to set an image as the background.
Solution:
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 Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background Image Example</h1>
<p>This webpage has a background image.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg'); /* Set background image */
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 3: Prevent Background Image from Repeating
Objective:
Learn how to prevent the background image from repeating.
Steps:
1. Set a background image for the webpage.
2. Use the background-repeat property to prevent the image from repeating.
Solution:
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>No Repeat Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>No Repeat Background Image</h1>
<p>The background image will not repeat.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg'); /* Set background image */
background-repeat: no-repeat; /* Prevent the image from repeating */
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 4: Set Background Size to Cover
Objective:
Learn how to make the background image cover the entire page.
Steps:
1. Set a background image for the webpage.
2. Use the background-size: cover property to make the image cover the entire viewport.
Solution:
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>Cover Background Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background Image Cover</h1>
<p>The background image covers the entire page.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg');
background-size: cover; /* Make the image cover the entire page */
background-repeat: no-repeat;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 5: Set Background Image Position
Objective:
Learn how to position the background image.
Steps:
1. Set a background image for the webpage.
2. Use the background-position property to position the image (e.g., center it).
Solution:
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 Image Position</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background Image Positioning</h1>
<p>The background image is centered.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center; /* Center the background image */
background-repeat: no-repeat;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 6: Set Multiple Background Images
Objective:
Learn how to set multiple background images.
Steps:
1. Set two background images for the webpage.
2. Use the background-image property to specify both images.
Solution:
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>Multiple Background Images</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Multiple Background Images</h1>
<p>The webpage has two background images.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background1.jpg'), url('background2.jpg'); /* Set multiple background images */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 7: Background Image with Text Overlay
Objective:
Learn how to create a background image with text overlay.
Steps:
1. Set a background image for the webpage.
2. Add text on top of the background image.
3. Use CSS to adjust the text position and style.
Solution:
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>Text Overlay</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="overlay">
<h1>Welcome to My Webpage</h1>
<p>This is a background image with text overlay.</p>
</div>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
font-family: Arial, sans-serif;
}
.overlay {
text-align: center;
padding: 100px;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.5em;
}
Assignment 8: Experiment with Background Size and Repeat
Objective:
Learn how to experiment with background-size and background-repeat.
Steps:
1. Set a background image for the webpage.
2. Use background-size: 50% and background-repeat: repeat-x.
Solution:
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 Size and Repeat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background Image Experiment</h1>
<p>Background size is set to 50%, and image repeats horizontally.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: url('background.jpg');
background-size: 50%; /* Resize the image to 50% */
background-repeat: repeat-x; /* Repeat the image horizontally */
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
Assignment 9: Set Background for Specific Section
Objective:
Learn how to apply a background to a specific section of the webpage.
Steps:
1. Create a section with the id="hero".
2. Apply a background to only this section using CSS.
Solution:
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>Section Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="hero">
<h1>Hero Section</h1>
<p>This section has a background.</p>
</div>
</body>
</html>
CSS (style.css):
css
Copy code
#hero {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 100px;
}
Assignment 10: Create a Gradient Background
Objective:
Learn how to create a gradient background.
Steps:
1. Use the background-image property to create a linear gradient.
Solution:
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>Gradient Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Gradient Background</h1>
<p>This webpage has a gradient background.</p>
</body>
</html>
CSS (style.css):
css
Copy code
body {
background-image: linear-gradient(to right, red, yellow);
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 100px;
}
No comments:
Post a Comment