How to add Background-Color for Text Width Instead of Entire Element Width using CSS ? Last Updated : 23 Feb, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to add background color for the text width instead of the entire element width using CSS. The display: inline or display: inline-block property is used to set the background color of the text width. Syntax: display: inline; display: inline-block; Approach: We will create an element and then apply the display: inline or display: inline-block property value to set the background color for the text width. The inline value is used to display an element as an inline element and the inline-block element is used to display an element as an inline-level block container. Example 1: The following code demonstrates the above approach with display: inline-block property value. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to add Background-Color for Text Width Instead of Entire Element Width using CSS ? </title> <style> body { text-align: center; } h1 { color: green; } h2 { display: inline-block; background-color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to add Background-Color for Text Width Instead<br> of Entire Element Width using CSS ? </h3> <h2>Web Technology</h2> </body> </html> Output: Example 2: The following code demonstrates the above approach with display: inline property value applied on the span elements. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to add Background-Color for Text Width Instead of Entire Element Width using CSS ? </title> <style> body { text-align: center; } h1 { color: green; } span { display: inline; background-color: green; color: white; padding: 10px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to add Background-Color for Text Width Instead<br> of Entire Element Width using CSS ? </h3> <p> <span>Web Technology</span> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </p> </body> </html> Output: Comment More infoAdvertise with us Next Article How to add a specific color to an element using CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to set background color for an elements using jQuery ? In this article, we will set the background color for an element using jQuery. To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to che 1 min read How to Add Background Color in Input and Text Fields using CSS ? In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these ele 2 min read How to Set the background-color of different Elements in CSS? Background colors in CSS set the color behind an element's content and padding. Use the background-color property to assign colors to elements, specifying values in hex, RGB, or color names. This allows customization of elements' backgrounds for design and readability.Using Background Color Property 2 min read How to add a specific color to an element using CSS ? In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r 2 min read How to change the color of horizontal line (<hr> element) using CSS ? The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The color of the <hr> tag can be set by using the background-color property in CSS.Example 1: In this example, the CSS within the <style> section custo 1 min read How to Set Width and Height of Span Element using CSS ? The <span> tag is used to apply styles or scripting to a specific part of text within a larger block of content. The <span> tag is an inline element, you may encounter scenarios where setting its width and height becomes necessary. This article explores various approaches to set the widt 2 min read Like