React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style

Nathan Sebhastian

There are four ways to set a backgroundImage style property using React’s inline CSS.

This tutorial will show you all four methods, with code samples for each.

Here’s an Interactive Scrim of Setting a Background Image with React

How to Set a Background Image in React Using an External URL

If your image is located somewhere online, you can set the background image of your element by placing the URL like this:

This way, you won’t show any broken image links on your web app. In the code above, the value of backgroundImage is set using a template string, which allows you to embed JavaScript expressions.

How to Set a Background Image in React Using the Relative URL Method

The public/ folder in Create React App can be used to add static assets into your React application. Any files you put inside the folder will be accessible online.

If you put an image.png file inside the public/ folder, you can access it at /image.png . When running React in your local computer, the image should be at http://localhost:3000/image.png .

You can then assign the URL relative to your host address to set the background image. Here’s an example:

Don’t forget to adjust the backgroundImage value to url(/img/image.png) if you decide to create the folder.

How to Set a Background Image in React Using the Absolute URL Method

You can also include the absolute URL by using Create React App’s PUBLIC_URL environment variable like this:

The absolute URL will only be seen when you deploy React into production application later.

How to Set a Background Image with Additional Properties

If you want to customize the background image further, you can do so by adding additional properties after the backgroundImage . Here’s an example:

 
)`, backgroundRepeat: 'no-repeat', width:'250px' >>> Hello World
 

The properties set above will add background-repeat: no-repeat and width: 250px together with the background-image style to the element.

Thank you for reading, and I hope you found this article useful. If you have any questions, you can find me on Twitter. I will share some short developer tips from time to time as well. 🙂

Nathan Sebhastian

JavaScript Full Stack Developer currently working with fullstack JS using React and Express. Nathan loves to write about his experience in programming to help other people.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

Different Ways to add CSS in React JS

Hi guys!. In this post, we will be looking at the best ways to add CSS code to your React app.
Undoubtedly, CSS plays a crucial role in making your app user-friendly and visually appealing. There are various ways to add CSS to your React app. Let’s discuss some of them.

1 — External Stylesheet

You can create a new CSS file in your project directory and add your CSS inside it. It can then be imported into your React component or class.
The following code is used to import an external CSS stylesheet.

2 — Inline CSS

Inline CSS is perhaps the most common and quick method to add styles in React. However, it has several drawbacks and is generally discouraged, especially for larger applications. To implement inline CSS, you can create an object containing style references, which can be then called using the style<> attribute.
For example:

const styles =  section:  fontSize: "18px", color: "#292b2c", backgroundColor: "#fff", padding: "0 20px" >, wrapper:  textAlign: "center", margin: "0 auto", marginTop: "50px" > > 

section style=styles.section>> div style=styles.wrapper>> /div> /section> 

3 — Styled Components

Probably the most powerful and useful in my opinion is Styled Components. Styled Components lets you write actual CSS in your JavaScript. The main advantage is that you can add conditional code and use variables and functions within the CSS. You can install Styled Components using the following command:
npm install —save styled-components
Next, you need to import it into your component. Then you can create a new variable that will contain the CSS. The same variable name can be used to an HTML element with the previously added styles on it.

import styled from 'styled-components' // Create a button variable and add CSS const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid red; color:red; ` //display the HTML return ( div> Button>Button/Button> /div> ); 

Other than these, there are 3 more useful ways you can add CSS (credit to lukeshiru):

4 — CSS Modules

You can also add scoped styles quite easily, you just need to create a file with the extension .module.css, like this:

// ComponentName.module.css .Red  color: #f00; > .Blue  color: #00f; > 

import styles from "./ComponentName.module.css"; 

span className=styles.Red>>This text will be red/span> span className=styles.Blue>>This text will be blue/span> 

5 — Atomic CSS

One of the most popular atomic CSS frameworks out there is Tailwind, by just making it part of your project following their instructions you can just use classNames without even touching CSS.

button className="font-bold bg-blue-600 px-6 py-3 text-white rounded-md">Blue button/button> 

6 — Emotion

Styled-components is not the only library that allows you to create components with styles embeded on them, you have great alternatives out there such as Emotion. The best thing about Emotion is that it’s framework agnostic, so you can take your knowledge to other libraries and frameworks besides React, while being pretty similar to styled-components (so you can in several scenarios just change the import). And there you have it. I am sure there are many more out there but I think these options tick most of the boxes needed when adding CSS to your app. Kindly check out my blog too! Thanks!

Источник

Styling React Using CSS

There are many ways to style React with CSS, this tutorial will take a closer look at inline styling, and CSS stylesheet.

Inline Styling

To style an element with the inline style attribute, the value must be a JavaScript object:

Example:

Insert an object with the styling information:

class MyHeader extends React.Component < render() < return ( 
>>Hello Style!
 
Add a little style!
 
 ); > > 

Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces > .

camelCased Property Names

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color , must be written with camel case syntax:

Example:

Use backgroundColor instead of background-color :

class MyHeader extends React.Component < render() < return ( 
>>Hello Style!
 
Add a little style!
 
 ); > > 

JavaScript Object

You can also create an object with styling information, and refer to it in the style attribute:

Example:

Create a style object named mystyle :

class MyHeader extends React.Component < render() < const mystyle = < color: "white", backgroundColor: "DodgerBlue", padding: "10px", fontFamily: "Arial" >; return ( 
>Hello Style!
 
Add a little style!
 
 ); > > 

CSS Stylesheet

You can write your CSS styling in a separate file, just save the file with the .css file extension, and import it in your application.

App.css:

Create a new file called «App.css» and insert some CSS code in it:

Note: You can call the file whatever you like, just remember the correct file extension.

Import the stylesheet in your application:

index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import './App.css'; class MyHeader extends React.Component < render() < return ( 
Hello Style!
 
Add a little style!.
 
 ); > > ReactDOM.render(, document.getElementById('root')); 

CSS Modules

Another way of adding styles to your application is to use CSS Modules.

CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

Create the CSS module with the .module.css extension, example: mystyle.module.css .

mystyle.module.css:

Create a new file called «mystyle.module.css» and insert some CSS code in it:

Import the stylesheet in your component:

App.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import styles from './mystyle.module.css'; class Car extends React.Component < render() < return 
>Hello Car!
; > > export default Car; 

Import the component in your application:

index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import Car from './App.js'; ReactDOM.render(, document.getElementById('root')); 

Источник

Styling React Using CSS

There are many ways to style React with CSS, this tutorial will take a closer look at three common ways:

Inline Styling

To style an element with the inline style attribute, the value must be a JavaScript object:

Example:

Insert an object with the styling information:

const Header = () => < return ( <>
>>Hello Style!
 
Add a little style!
 ); > 

Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces > .

camelCased Property Names

Since the inline CSS is written in a JavaScript object, properties with hyphen separators, like background-color , must be written with camel case syntax:

Example:

Use backgroundColor instead of background-color :

const Header = () => < return ( <>
>>Hello Style!
 
Add a little style!
 ); > 

JavaScript Object

You can also create an object with styling information, and refer to it in the style attribute:

Example:

Create a style object named myStyle :

const Header = () => < const myStyle = < color: "white", backgroundColor: "DodgerBlue", padding: "10px", fontFamily: "Sans-Serif" >; return ( <> 
>Hello Style!
 
Add a little style!
 ); > 

Get Certified!

CSS Stylesheet

You can write your CSS styling in a separate file, just save the file with the .css file extension, and import it in your application.

App.css:

Create a new file called «App.css» and insert some CSS code in it:

Note: You can call the file whatever you like, just remember the correct file extension.

Import the stylesheet in your application:

index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import './App.css'; const Header = () => < return ( <>
Hello Style!
 
Add a little style!.
 ); > const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); 

CSS Modules

Another way of adding styles to your application is to use CSS Modules.

CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

Create the CSS module with the .module.css extension, example: my-style.module.css .

Create a new file called «my-style.module.css» and insert some CSS code in it:

my-style.module.css:

Import the stylesheet in your component:

Car.js:

import styles from './my-style.module.css'; const Car = () => < return 
>Hello Car!
; > export default Car; 

Import the component in your application:

index.js:

import ReactDOM from 'react-dom/client'; import Car from './Car.js'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); 

Источник