{"id":298,"date":"2022-05-23T19:29:42","date_gmt":"2022-05-23T19:29:42","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=298"},"modified":"2023-03-27T12:45:51","modified_gmt":"2023-03-27T12:45:51","slug":"css-background-color","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-background-color\/","title":{"rendered":"CSS Background Color"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Background Color<\/strong><\/p>\n\n\n\n<p>As the name of the property says, the background-color property gives color to the background of the element. You can use a valid color name for the color, the HEX code for the color, or the RGB value to set the color, etc. You are allowed to set the background color for any HTML element.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Background Color Property | Lecture 13 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/QvtzRngJqUM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Let&#8217;s have an example, which demonstrates to us the working of background-color property. We would try to set the background color of the body in the example. Have a look at the example &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"809\" height=\"339\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color.jpg\" alt=\"\" class=\"wp-image-1333\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color.jpg 809w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-300x126.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-768x322.jpg 768w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, we have specified that the background color of the body should be light green. The thing is that you have some different ways to give the color, like directly giving the name of the color, giving the hex code for the color, giving the RGB values, etc. As you can see those different values in the comments, are just below the background-color property. You can try those values as well.<\/p>\n\n\n\n<p>If you try to have a look at the output, it looks something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"553\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-1.jpg\" alt=\"\" class=\"wp-image-1334\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-1-300x162.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Background-color-1-768x415.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, the background color of the body has now become light green. You can also try those other values, and also try putting your favorite colors. Whenever we need to put some background color for some element on the web page, we would be using the background-color property.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Background Color As the name of the property says, the background-color property gives color to the background of the element. You can use a valid color name for the color, the HEX code for the color, or the RGB value to set the color, etc. You are allowed to set the background color for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,178,13],"class_list":{"0":"post-298","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-background-color","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":5609,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/298\/revisions\/5609"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}