How to Set Background Image in CSS?
Last Updated :
10 Sep, 2024
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 to the element. we are going to set the background image in an HTML document using CSS.
In CSS, there are various ways to set the background image:
Using the background-image
The simplest and most basic method to set the background image is by using the background-image property. This property can allow you to specify the image URL that will be applied as the background to the element. This approach can allow you to place the background image behind the content of the element but offers minimal over its behavior (such as repeating or positioning).
Syntax:
element {
background-image: url('image-path');
}Example: In this example, the entire body has the background image. By default, the image will repeat both vertically and horizontally to fill the entire element's space.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-image: url('geekforgeek.png');
}
</style>
</head>
<body>
<h1>Using `background-image` Property</h1>
</body>
</html>
Output: The image will repeat and cover the entire screen.
OutputUsing Other background properties
In many cases, we may want more control over how the background image is displayed. By coming the background-image with properties like background-repeat, background-position, and background-size, we can achieve the more specific behaviors for the image such as the preventing it from repeating or scaling it to the fit the container. This allows you to define whether the image repeats, where it is palced, how it scales, and whether it scrolls with the content.
Syntax:
element {
background-image: url('image-path');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}Example: In this example, the image will be scaled to cover the body and centered, and will not repeat.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-image: url('geekforgeek.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<h1>Combining `background-image` with Other Properties</h1>
</body>
</html>
Output: The image will be scaled to cover the body and centered, and will not repeat.
OutputUsing the shorthand background
Instead of specifying the each individual background property, CSS can provides the shorthand background property that allows you to combine the several background-related properties into the single line. This approach can be more concise and makes the CSS more readable. This method is efficient, reduces redundancy, and makes the CSS more readable.
Syntax:
element {
background: url('image-path') no-repeat center/cover;
}Example: In this example, the shorthand background property can be used to define the background image, set it to not repeat, center it, and scale it to cover the entire body.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: url('geekforgeek.png') no-repeat center/cover;
}
</style>
</head>
<body>
<h1>Using Shorthand `background` Property</h1>
</body>
</html>
Output: The image can be displayed in the background, centered, covering the whole body, without repeating.
OutputConclusion
CSS can offers the various approaches to set the background images, providing the flexiblity in the terms of the positioning, size, and behavior. This article illustrates the key methods and syntax used to set the background image and handle it effectively on the web pages.
Similar Reads
How to Add Background Image in CSS?
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 ElementA background image is added to an h1 tag using the URL. [GFGTABS] HTML <h1 style="background-image: url( 'https://media.geeksfor
1 min read
CSS - How To Set Opacity Of Background Image?
Here are the different ways to set the opacity of the background image 1. 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). Syntax div { opacity: 0.5; /* Adjusts t
1 min read
How to Remove Background from image in CSS?
In web design, removing or hiding the image's background is a common task for better visuals or layering content. With CSS, developers can achieve this using various techniques depending on the requirement, such as making the background transparent or clipping out parts of the image. we will discuss
5 min read
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
2 min read
How to set background images in ReactJS
Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set
4 min read
How to set multiple background images using CSS?
The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr
2 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 Set Background Image in HTML Table ?
Setting a background image in an HTML table can enhance the visual appeal of your webpage. In this article, we will discuss two methods to set a background image in an HTML table i.e. using inline CSS and external CSS. Set Background Image in HTML Table using Inline CSSIn this approach, we directly
2 min read
How to Change Background Image in javaScript?
This article will show you how to change the background color in JavaScript. Changing a background image in JavaScript involves modifying the style property of an HTML element to update its backgroundImage property. This can be done by selecting the element and setting its style.backgroundImage prop
2 min read
How to set Background Image in react-native ?
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
2 min read