Skip to content

Courses
Tutorials
Practice
Contests

CSS Tutorial
CSS Exercises
CSS Interview Questions
CSS Selectors
CSS Properties
CSS Functions
CSS Examples
CSS Cheat Sheet
CSS Templates
CSS Frameworks
Bootstrap
Tailwind
CSS Formatter

How to Specify a Fixed Background Image in CSS?

How to Add Background Image in CSS?

Last Updated : 19 Nov, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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 Specify a Fixed Background Image in CSS?

V

vkash8574

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

How to Add Background Image in HTML?

Adding a background image to 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 background image in HTML, but this attribute is depreciated in HTML5 and not in use. In place of background att

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

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

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

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

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences