Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

How To Add Background In CSS3?

What is background? A surface or color that is behind or around something. What can be set as background? Answer is color, image, repeat, attachment, position, origin etc. can be set as background. Let’s see how to apply it in webpage.

To apply BG color : 

write: body {font-size: 30px; text-align: center; background-color: red;}

You will see, your whole body will get red color as background.

To apply BG image :

body {font-size: 30px; text-align: center; background-image: url(img_name.jpg)}

After saving, you will see, an image is applied as background.

Now, we will see BG repeat. As shown in video, when image’s size is smaller than browser’s size, image repeat itself. This is the default function, image automatically repeat if smaller than required size.

To remove this repetition :

body {font-size: 30px; text-align: center; background-image: url (img_name.jpg); background-repeat: no-repeat;}

You will see, browser displays the image with its original size and some portion of background remains empty. But, this does not look good on a webpage. So what will we do? We will resize the image:

To resize background :

body {font-size: 30px; text-align: center; background-image: url (img_name.jpg); background-repeat: no-repeat; background-size: 100%;}

Background Attachment :

body {font-size: 30px; text-align: center; background-image: url (img_name.jpg); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed;}

Background Position :

To adjust the alignment of image, background position is used. This will align image center point and browser’s center point.

body {font-size: 30px; text-align: center; background-image: url (img_name.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center;}

So this way, you can add backgrounds to different elements.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere