![\"Background](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/464915-PGTBJ5-627-1024x819.jpg\")
<\/p>\n<\/p>\n
<\/p>\n
Images are a vital part of modern webpages and adding a background image gives a perfect touch to the look and feel of a webpage. DesignHill<\/a> talks about how the background image is attention-grabbing and the most visually appealing element of any webpage.<\/p>\n We will learn all about it by starting with a code to add an image on the entire page or having different images in sections. And later on, we will explore some properties of a background image like center, repeat, etc. I would suggest to follow the code closely and try it in CodePen<\/a>.<\/p>\n The first code will be used to add an image in the background of the body.<\/p>\n Here\u2019s the code:<\/p>\n <\/p>\n CSS File: Background.css<\/p>\n <\/p>\n Output:<\/p>\n So, we have used the property background-image <\/em>with the value as a URL of the website from where we want to import an image. The property has been used for the content inside the body tag and therefore we will see the background image on the entire page. The text inside the body tag will overlay on the background image.<\/p>\n Well, we may want to write over the image only in a part of the webpage which could be for the aesthetics or to show importance or to help the reader visualize. We use the property background-image <\/em>but only for the content in <div> tag. Let\u2019s see a code to understand it better.<\/p>\n Code:<\/p>\n CSS Filename: DivisionImage.css<\/p>\n In the above code, we saw how to add an image in a division. Well, we can expand the usage by adding multiple <div> tags in the HTML code with unique ids assigned to every tag. This id will be further utilized in the CSS to add different background images to every section.<\/p>\n I\u2019m sure this short text would have helped to map how to do it. For clarity have a look at the following code.<\/p>\n Code:<\/p>\n CSS File: MultipleDiv.css<\/p>\n Output:<\/p>\n We also have properties to be used along with the background-image such as background-position, background-repeat, background-size. To understand all properties it is better to use all inside a single code. Thus, by following the code and changing the values you can understand the usage.<\/p>\n Check the code below and relate the use of different properties in there.<\/p>\n <\/p>\n CSS File:<\/p>\n Output:<\/p>\n We have seen codes to add background image in different ways and later used multiple properties inside the code. In all, with this article, you should be equipped with the required properties to play around background images.<\/p>\n To learn how to center an image in CSS, visit our previous article. To learn more about CSS, subscribe to our blog<\/a>!<\/p>\n<html>\n<head>\n <title> Back ground image in body <\/title>\n<\/head>\n\n<link rel=\u201dstylesheet\u201d href=\u201dbackground.css\u201d>\n\n<body>\n<h1> Hello World! <\/h1>\n<p> This text is not easy to read on this background image. <\/p>\n<\/body>\n<\/html><\/pre>\n
body {\n\n\u00a0 background-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2017\/03\/02\/08\/58\/background-texture-2110724_960_720.jpg\");\n\n}<\/pre>\n![\"Background](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/BackgroundImage.jpg\")
<\/p>\nAdding Image Only In A Part Of A Page.<\/h3>\n
<html>\n\n<head>\n\n\u00a0 <title> Back ground image in body <\/title>\n\n<\/head>\n\n<link rel= \u201cstylesheet\u201d href= \u201cDivisionImage.css\u201d>\n\n<body>\n\n<div>\n\n<h1> Hello World! <\/h1>\n\n<p> This text is not easy to read on this background image. <\/p>\n\n<\/div>\n\n<\/body>\n\n<\/html><\/pre>\n
div {\n\n\u00a0 background-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2017\/03\/02\/08\/58\/background-texture-2110724_960_720.jpg\");\n\n}\n\nOutput:<\/pre>\n![\"Background](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/DivImage.jpg\")
<\/p>\nHow To Add Multiple Background Images<\/h3>\n
<html>\n<head>\n <title>Back ground image in body<\/title>\n<\/head>\n<body>\n<div class=\"c1\">\n<h1>Hello World!<\/h1>\n<p> This text is not easy to read on this background image. <\/p>\n<\/div>\n <div class=\"c2\">\n<h1>Hello World!<\/h1>\n<p> This text is not easy to read on this background image. <\/p>\n<\/div>\n <div class=\"c3\">\n<h1>Hello World!<\/h1>\n<p>This text is not easy to read on this background image.<\/p>\n<\/div>\n<\/body>\n<\/html><\/pre>\n
.c1 {\n background-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2017\/03\/02\/08\/58\/background-texture-2110724_960_720.jpg\");\n}\n.c2 {\n background-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2017\/08\/12\/10\/13\/background-2633962__340.jpg\");\n}\n.c3 {\n background-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2017\/07\/27\/23\/00\/background-2547097__340.jpg\");\n}\n\n<\/pre>\n![\"Background](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/MultipleBImages.jpg\")
<\/p>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<\/head>\n<body>\n<div class=\"c1\">\n <div class=\"c2\">\n \u00a0\u00a0 <h1 style=\"font-size:50px\"> Hi multiple properties have been used around <\/h1>\n \u00a0\u00a0 <h3> Feel free to change and check. <\/h3>\n \u00a0\u00a0 <button> Click me to get relief <\/button>\n <\/div>\n<\/div>\n<\/body>\n<\/html><\/pre>\n
body {\nmargin: 0;\n}\n.c1 {\nbackground-image: url(\"https:\/\/cdn.pixabay.com\/photo\/2020\/09\/05\/12\/38\/landscape-5546444_960_720.jpg\");\nheight: 250px;\nbackground-position: center;\nbackground-repeat: no-repeat;\nbackground-size: cover;\nposition: fix;\n}\n.c2 {\ntext-align: center;\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\ncolor: white;\n}<\/pre>\n![\"Background](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/MultipleProperties-1024x363.png\")
<\/p>\nConclusion:<\/h3>\n