Connect with us

CSS

CSS How to set Background Image

In this article post, you will come to know How to set background image using CSS. Applying the image to display in the background can be tricky sometimes & you may come across wasting lots of time to bring the accurate desired results.

Background images are a common thing that appear in almost every web page. Web application within images looks dull & visitors do not get a satisfying vision because of lack of images.

This may result in visitors to divert to another application that has more clear images. Visitors visit our web sites with a purpose & intent of understanding something they are searching for. When they understand with ease with images then they leave our web page happily & not confused.

Picture speaks louder than words. Long paragraphs of words are incapable of making that reader understand the material instantly & on the contrary one image is capable of making things clear quickly without any detailed explanation.

Background image can be applied to the main body tag or it may be needed in a particular section of a web page. The images can be applied to the html elements with the help of background-image property.

Let’s take a look at background-image property.

Background-image Property

In this property we can specify the image that we want to display within the html element. The image will be displayed in the background & any text within the element is also going to display above the image.

The background image may be in your own website or you can also display an image from any other web site by mentioning the Web Url address of that image. If the image is present within your web application then the path of the image needs to be mentioned.

Practical Code

CSS :-

        body {
             background-image: url('https://static.toiimg.com/photo/msid-74734687/74734687.jpg?1484479');
             background-size: 600px 400px;
             color: white;
          }
        

HTML :-

        <body>This background image is awesome.</body>

Result :-

CSS How to set background image

How to set background image in header?

We can see the Background image located in the header in most of the web applications. When we open the web site the first thing that we can see is the attractive banner in the header.

The images are sometimes changing & animating. They drive the attention of the visitor & can give him a quality impression of the content in the web site.

Colorful images in the forefront of the web page increases the beauty of the web site. Using the proper color combinations throughout the web page gives a uniformity to the application.

Images are also used as advertisements so that the user can jump into the image & he can further buy the product by navigating to the advertisement.

Now we will see How to set background image in header :-

CSS :-

    header {
        background-image: url('https://i.pinimg.com/originals/0b/a3/d6/0ba3d60362c7e6d256cfc1f37156bad9.jpg');
        width: 100%;
        height: 200px;
    }

HTML :-

    <header>
        <div class="menu"></div>   
    </header>

Result :-

background image header

In the above code, header tag is used to display the banner image. Header tag will be wrapper that can be further used to add other components within the header.

Css is applied to the header element with background-image property specifying the image to be displayed. It futher sets the width & height of the header element.

Conclusion

As you have got the practical code now you can try it by yourself with different variations. Practicing the code makes the learning cycle complete & things become clear.

You have learned How to set background image using CSS in this blog post so you can further apply the CSS properties in your desired place to achieve the good design for your web application.

It’s always fun to play around with CSS & when we have enough knowledge about the CSS properties then web development becomes a playful & exciting act.

Do share the post if you liked it 🙂