Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • React Tutorial
  • React Exercise
  • React Basic Concepts
  • React Components
  • React Props
  • React Hooks
  • React Router
  • React Advanced
  • React Examples
  • React Interview Questions
  • React Projects
  • Next.js Tutorial
  • React Bootstrap
  • React Material UI
  • React Ant Design
  • React Desktop
  • React Rebass
  • React Blueprint
  • JavaScript
  • Web Technology
Open In App
Next Article:
How to Add a Background Image in Next.js?
Next article icon

How to set a Background Image With React Inline Styles ?

Last Updated : 01 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Setting a background image with React inline style is a straightforward method of using the images as background to enhance the UI of the wen application.

How to Set Background Image in React ?

To set background image with react inline styles we will be using the style attribute. This style attribute is used to add inline CSS to the individual element. We will use the Image in multiple ways to set the background image.

Table of Content

  • using external URL
  • using the Absolute URL method
  • using the Relative URL method

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project Structure:

Lightbox

List of dependencies in the package.json file are:

"dependencies": {     "@testing-library/jest-dom": "^5.17.0",     "@testing-library/react": "^13.4.0",     "@testing-library/user-event": "^13.5.0",     "react": "^18.3.1",     "react-dom": "^18.3.1",     "react-scripts": "5.0.1",     "web-vitals": "^2.1.4" },

Approach 1: Set background image using external URL

If the image located somewhere online, then the background image of the element can be set like this:

JavaScript 
// Filename: App.js  import React from "react";  const App = () => { 	return ( 		<div 			style={{ 				backgroundImage: 					'url("https://media.geeksforgeeks.org/' + 					'wp-content/uploads/20201221222410/download3.png")', 				height: "300px", 				backgroundRepeat: "no-repeat" 			}} 		> 			<h1> HELLO </h1> 		</div> 	); };  export default App;

Approach 2: Set background image using the Absolute URL method

If you put your image, for example, background.jpg file inside the public/ folder, you can include the absolute URL by using the PUBLIC_URL environment variable.

JavaScript 
// Filename: App.js  import React from "react";  const App = () => { 	return ( 		<div 			style={{ 				backgroundImage: `url(${ 					process.env.PUBLIC_URL + "/background.jpg" 				})`, 				height: "300px", 				backgroundRepeat: "no-repeat" 			}} 		> 			<h1>Hello</h1> 		</div> 	); };  export default App;

Approach 3: Set background image using the Relative URL method

If you put your image, for example, background.jpg file inside the public/ folder in the react app, you can access it at <your host address>/background.jpg. 

You can then assign the URL relative to your host address to set the background image like this:

JavaScript 
// Filename: App.js  import React from "react";  const App = () => { 	return ( 		<div 			style={{ 				backgroundImage: "url(/background.jpg)", 				height: "300px", 				backgroundRepeat: "no-repeat" 			}} 		> 			<h1>Hello</h1> 		</div> 	); };  export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: 


Next Article
How to Add a Background Image in Next.js?

K
kothawade29
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • ReactJS

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 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
  • 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 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 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 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 use Inline Styles in React ?
    ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly
    3 min read
  • How To Use Inline Styles in ReactJS?
    Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects. Each CSS property is camelCa
    3 min read
  • How to add background-image using ngStyle in Angular2 ?
    The ngStyle Attribute is used to add some style to an HTML element. In this article, we will learn How to add background-image using ngStyle in Angular. To achieve this, we will follow the below approaches. Table of Content Steps for Installing & Configuring the Angular ApplicationProject Struct
    3 min read
  • How to Pass Variable to Inline Background Image in VueJS ?
    In this article, we will learn how we can pass variables to inline background images in VueJS. We will explore two different approaches with practical implementation in terms of examples and outputs. Table of Content Using :style BindingUsing :class BindingUsing :style BindingIn this approach, we ar
    3 min read
geeksforgeeks-footer-logo
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
GFG App on Play Store GFG App on App Store
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
Lightbox
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