How to Add Background Image in CSS?

How to Add Background Image in CSS?

Last Updated : 19 Nov, 2024

The CSS background-image property is used to add an image as a background to an element.

Syntax

background-image: url()

1. Setting background Image of an Element

A 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>

Output

background-image — Background-image

2. Setting Background Size

The size of the background image can be set using the background-size property.

Syntax

background-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>

Output

background-cover

3. Positioning the Background Image

The background-position property allows you to position the background image within the element.

Syntax

background-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>

Output

output — background-position

4. Repeating Background Images

The repetition of the background-image can be set using the background-repeat property.

Syntax

background-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>

Output

repeating-image — Background-repeat property

How to Add Background Image in CSS?

V

vkash8574

Improve

Article Tags :

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

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

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

How to Specify a Fixed Background Image in CSS?

We will explore how to specify a fixed background image using the background-attachment property in CSS. This property is used to control the behavior of a background image as the user scrolls through a web page. By using the background-attachment property, you can make a background image fixed, scr

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

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

How to Add Image in Text Background using HTML and CSS ?

In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag

CSS - How To Set Opacity Of Background Image?

Here are the different ways to set the opacity of the background image1. Using Opacity PropertyThe opacity property in CSS is a simple way to adjust the transparency of an element. You can set its value between 0 (completely transparent) and 1 (fully opaque). Syntaxdiv { opacity: 0.5; /* Adjusts tra

How to blur background image using CSS ?

CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi

How to Add filter to the background image using CSS?

Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design