React JS Certification Training Course
- 10k Enrolled Learners
- Weekend
- Live Class
(4000)
CSS is an acronym for Cascading Style Sheets. It is a simple yet powerful design language that has the ability to transform web pages. In simple terms, it streamlines the process of making web pages presentable and appealing to the users with the help of HTML. In this article, we will understand how to implement various background image in CSS in the following order:
- Background Image in CSS Properties
- Background Image in CSS
- Background Repeat
- Background Attachment
- Background Position
- Background Image in CSS Size
- Background Color
Background Image in CSS Properties
There are many properties that are used to control the behaviors and positioning of the image. These properties are:
- background-image
- background-repeat
- background-attachment
- background-position
- background-size
- background-color
We will get familiarize with each of these properties and see when and how to use them with some interesting demonstration.
Background Image in CSS
The background-image property as the name suggests is simply used to indicate and set the background image through an element in a web-page. A background-image by default is placed at the top-left corner of an element.
syntax: background-image: url |none |linear-gradient |radial-gradient;
<html>
<head>
<style>
body {
background-image: url("apple.jpg");
}
</style>
</head>
<body>
<h3>background using url</h3>
</body>
</html>
Let’s understand the parameters:
- url: The input to this parameter allows us to specify either a file path to any image or the URL to the image which needs to be set as a background. In order to declare more than one image, the Url’s are separated with a comma delimiter.
body {
background-image: url("apple.jpg");
}
- none: This is the default value of the property and no background image is rendered if its value is specified.
body {
background: none;
}
- linear-gradient(): The background image is set to a linear gradient. A minimum of at least two colors are required to be specified for this property i.e for top to bottom.
body {
background-color:#001;
background-image: linear-gradient(white 15%, transparent 16%),
linear-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
- radial-gradient(): The background image is set to a radial gradient. A minimum of at least two colors are required to be specified for this property i.e for center to edges.
body {
background-color:#001;
background-image: radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
- repeating-linear-gradient(): It repeats a linear gradient. Let us use the same example that we saw above in the linear gradient for repeating-linear-gradient and see the difference.
body {
background-color:#001;
background-image: repeating-linear-gradient(white 15%, transparent 16%),
repeating-linear-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
- repeating-radial-gradient(): It repeats a radial gradient .Let us explore the same example we used above in a radial gradient.
body {
background-color:#001;
background-image: repeating-radial-gradient(white 15%, transparent 16%),
repeating-radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
Fallback Background
It is always advisable as a professional tip to add a background color as a fallback option. It comes to rescue especially when either the background images do not load or the gradient background we set while developing is not supported by some of the old browsers it is viewed on.
This doesn’t spoil the user experience and can be declared like this:
body {
background: url(apple_lost.jpg) pink;
}
Multiple Background
We also have an option to set multiple background images and it is required in most cases like a foreground and background image. The order of the image is important here, the image that should be at the front is declared first, and the image that should be at the back last is declared next.
Below is the example for multiple background images:
body {
background-image: url("small-heart.jpg"), url("background.jpg");
}
Background Repeat
The background-repeat property is used along with the background-image to define the repeat behavior of an image. It specifies whether and how a background image will be repeated. The background-image by default is repeated both vertically and horizontally.
The possible values are:
- repeat- The image repeats both horizontally and vertically
- no-repeat – The image does not repeat
- repeat-x – The image is repeated horizontally
- repeat-y – The image is repeated vertically
- space- The image is repeated with even spaces or gaps between.
- round – The image is repeated to fill the area without any gaps between them.
The CSS syntax for the background-repeat property is:
background-repeat: repeat |repeat-x |repeat-y |no-repeat |space |round;
body {
background-image: url("heart.png"), url("background.png");
background-repeat: repeat-y, repeat-x;
background-color: #ffffff;
}
Background Attachment
The background-attachment property is used along with the background-image to state whether or not the image should scroll as the content is scrolled. It signifies that of background image should be fixed or should scroll along with the document with relative to the browser window view. The default value is to scroll.
The possible values are:
- scroll – The image scrolls along with the page.
- fixed – The image will not scroll along with the page
The CSS syntax for the background-attachment is:
background-attachment: scroll |fixed;
body {
background-image: url("heart.png"), url("background.png");
background-repeat: space, round;
}
Background Position
The background-position property is used to denote the location or positioning of a background image. The possible values are:
- top
- right
- bottom
- left
- center
- combination of these values (e.g., left top)
The CSS syntax for the background-position is:
background-position: top |right |left |bottom |center;
body {
background-image: url("heart.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
Background Image in CSS Size
This property is one of the most useful as it allows us to control the size of the background image. There are different combinations we can employ with this property and get results accordingly. The default value is auto.
The following values can be used with background-size:
- auto
- a length- height and width of image e.g. 20px 40px.
- a percentage- height and width of image as a percentage w.r.t parent element e.g. 50% 50%.
- center- Align the image to the center
- cover, scaling the image to completely cover by the background area.
- contain, scaling the image to fit until its actual height and width.
The CSS syntax for the background-position is:
background-size: value;
body {
background-image: url("heart.png"), url("background.png");
background-repeat: no-repeat, repeat;
background-size: 400px 150px, cover;
}
body {
background-image: url("heart.png"), url("background.png");
background-repeat: no-repeat, repeat;
background-size: contain, 400px 150px;
}
Background Color
This the simplest of all properties in CSS applies. It applies solid colors to the background of the page. The value for this property can be specified in colors (e.g. red, blue, etc), hex value and RGB value.
The CSS syntax for the background-color is :
background-color: value;
body {
background-image: url(small-heart.jpg);
background-color: #22a8e3;
}
This concludes all the properties that we can use with the background. We can always try different combinations of the properties as we saw in our demonstration.
CSS is essential and must acquire skills for every front-end web developers. It helps while designing and styling the background and to build impressive websites and enrich user experience. The best is to keep experimenting and take full advantage of this special front-end technology as it can do wonders and dynamically transform the page.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of “Background image in CSS” blog and we will get back to you.
