React JS Training Course Online
- 20k Enrolled Learners
- Weekend
- Live Class
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:
There are many properties that are used to control the behaviors and positioning of the image. These properties are:
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:
body { background-image: url("apple.jpg"); }
body { background: none; }
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; }
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; }
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; }
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"); }
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:
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; }
Make your mark on the design world with our UI Design Course.
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:
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; }
The background-position property is used to denote the location or positioning of a background image. The possible values are:
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; }
Find out our UI UX Design Course in Top Cities
India | India |
UI UX Designer Course in Chennai | UI UX Design Course in Mumbai |
UI UX Design Course in Pune | UI UX Design Course in Ahmedabad |
UI UX Design Course in Bangalore | UI UX Design Course in Delhi |
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:
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.
Related Post: How to add image in React JS
Check out our Full Stack Web Developer Certification Course 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.
Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
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.
Course Name | Date | Details |
---|---|---|
UI UX Design Certification Course | Class Starts on 19th October,2024 19th October SAT&SUN (Weekend Batch) | View Details |
edureka.co