How to Add Background Image in CSS? Last Updated : 19 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL. HTML <h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/uploads/20240701150351/HTML-Tutorial.webp'); height: 550px;width: 50%;"> This Element has a background image </h1> OutputBackground-image2. Setting Background SizeThe size of the background image can be set using the background-size property. Syntaxbackground-size: value; HTML <body style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/uploads/20240701150351/HTML-Tutorial.webp'); background-size: cover;"> <h1 >Image with background-cover</h1> </body> Outputbackground-cover3. Positioning the Background ImageThe background-position property allows you to position the background image within the element. Syntaxbackground-position: value HTML <h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/uploads/20240701150351/HTML-Tutorial.webp'); background-position: center; background-repeat: no-repeat; height: 500px; "> Positioning the image </h1> Outputbackground-position4. Repeating Background ImagesThe repetition of the background-image can be set using the background-repeat property.Syntaxbackground-repeat: repeat HTML <body style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/uploads/20240701150351/HTML-Tutorial.webp'); background-repeat: repeat-x;"> <h1 >Background-repeat property</h1> OutputBackground-repeat property Comment More infoAdvertise with us Next Article How to Add Background Image in HTML? V vkash8574 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Set Background Image in CSS? CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied 3 min read How to Add Background Image in HTML? Adding a background image to an HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add a background image in HTML, but this attribute is deprecated in HTML5 and is not in use. In place of the bac 3 min read How to Add a Background Image in Next.js? Next.js is a powerful React framework that allows for server-side rendering and the generation of static websites. Adding a background image to your Next.js application can enhance the visual appeal of your web pages. This article will guide you through the process of adding a background image to a 3 min read How to Add Background Image Overlay in Tailwind CSS? Adding a background overlay to your Tailwind CSS project can help you create visually appealing layouts that layer content over the background image. In this article, we'll demonstrate how to add a background overlay using the Tailwind CSS utility class.ApproachWe will use Tailwind CSS to create a s 2 min read How to Specify a Fixed Background Image in CSS? Adding a background image to a website is one of the most common design techniques. But what if you want the image to stay fixed in place, even when the user scrolls down the page?That’s exactly what fixed background images in CSS are for. This article will guide you step-by-step on how to specify a 3 min read How to Remove Background from image in CSS? In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to 5 min read Like