How to set width and height of background image in percent with respect to parent element in CSS ? Last Updated : 09 May, 2023 Comments Improve Suggest changes Like Article Like Report If we are using an image as a child and want to set the height and width in percentage then we need to set the parent element with some fixed size. Approach 1: Here we will use CSS inside the tags which are also known as inline CSS.For the parent div we will give a fixed size by giving height: 500px and width: 40% according to screen size, and we will give it background color and border to clearly make the parent visible.Now for the child image, we will give a width: 60% and a height: 70%. Example: In this example, we are using the above-explained approach. HTML <!DOCTYPE html> <html> <body> <div style="height: 500px; width: 40%; background-color: red; border-color: green; border-style: dashed;"> <img src="gfg-2.png" alt="GFG" style="width: 60%; height: 70%"> </div> </body> </html> Output: Approach 2: Here we will write the CSS in style tag also known as inline CSS.Now we will give the parent a fixed size by giving it height: 500px and width: 40% and to define the parent clearly we will give border-color and background-color.Finally, we will give the image width: 50% and height: 45%. Example: In this example, we are using the above approach. HTML <!DOCTYPE html> <html> <head> <style> /* giving parent fix size */ div { height: 500px; width: 40%; background-color: blue; border-color: black; border-style: dashed; } /* child having size in % */ img { width: 50%; height: 45%; } </style> </head> <body> <div> <img src="gfg-2.png" alt="GFG"> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to set width and height of background image in percent with respect to parent element in CSS ? R rajatagrawal5 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How To Set The Height And Width Of Background Image Inline Style In React? In React, while handling styles dynamically you might encounter setting a background image with specific dimensions using inline styles. While CSS stylesheets are generally preferred for styling, there are cases where inline styles make more sense, such as when you need to apply dynamic values or wo 3 min read How to add Background-Color for Text Width Instead of Entire Element Width using CSS ? 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 cr 2 min read How to set Background Image with opacity in Tailwind CSS? Tailwind CSS is a utility-first approach to stylesheets that utilizes customized utility classes for styling. Although Tailwind officially supports setting the background image, there is no built-in class to directly set the background image’s opacity while keeping the opacity of the overlay content 3 min read How to combine background-image and gradient on the same element using CSS3 ? Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describe 2 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