Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set different background properties in one declaration?
CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of a website, including the background properties. Using CSS, the background properties of a webpage can be easily customized to create unique designs that enhance the user experience. Using one declaration is an efficient way to set various background properties, which is useful for web developers to save time and keep their code concise.
Understanding Background Properties
Before setting multiple background properties in one declaration, we need to know the different background properties available in CSS and understand how each property works. Here is a brief overview each of the properties.
Background-color − This property allows setting the background color of an element.
Background-image − This property allows setting the background image of an element. Background image set using image URL, linear gradient or radial gradient.
Background-repeat − This property allows setting how the background image should be repeated. It is controlled using values like repeat, repeat-x, repeat-y and no-repeat.
Background-position − This property allows setting the position of the background image. The background image can be positioned using values such as top, bottom, left, right, and center.
Background-size − This property allows setting the size of the background image. The background image size can be set using values such as Auto, Cover, Include, or a specific size value in pixels, ems, or percentage.
Background-attachment − This property allows setting the background image should scroll with the page or remain fixed.
Setting Different Background Properties in One Declaration
The shorthand property 'background' is used to set multiple background properties, it allows to set background color, image, repeat, position and attachment in one declaration.
Syntax
selector {
background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment];
}
Here the order of properties does not matter and each property is separated by a space. Another property can be included in the 'background' shorthand property, depending on design requirements.
Examples of how to set multiple background properties in one declaration.
Now, we will understand some examples to set multiple background properties in one declaration.
Example 1: Setting a Background Image
Here, we will use the "background" shorthand property to set a background image in the body element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center fixed;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Setting a background image in the body element</h3>
</body>
</html>
In the above example, we have set the background image and background color of the body element. We have also set the background position to center, and fixed the background image so that it doesn't move when scrolled. The "no-repeat" property ensures that the background image is not repeated.
Example 2: Setting a Gradient Background
Here, we will use the background shorthand property to set a gradient background in the body element.
<!DOCTYPE html>
<html>
<head>
<title>Setting the Gradient Background</title>
<style>
body {
background: linear-gradient(to top, #00cfff, #1e40ff);
}
h1,h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the Gradient Background in the body element</h3>
</body>
</html>
In the above example, we have used the "linear-gradient" function to set the gradient background. The "to top" parameter specifies that the gradient should go from bottom to top.
Example 3 - Setting a Background Image in div Element
Here, we will use the "background" shorthand property to set a background image in the div element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
div {
background: lightblue url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat center fixed;
height:300px;
width:250px;
margin:auto;
}
</style>
</head>
<body>
<h2>Setting the Background image for the div element</h2>
<div></div>
</body>
</html>
In the above example, we have set the background image and background color of the body element. We have also set the background position to center, and fixed the background image so that it doesn't move when scrolled.
Conclusion
In the above article, we have discussed setting background properties in a single declaration. Background properties are an essential part of styling web pages. We use the shorthand property to set multiple background properties in a single declaration. The background shorthand property is very useful for saving time and improving code readability.
158 Views
