Table of Contents
Firstly, create your project in react by using create-react-app command, after that you have too many choice to set a background Image you can use regular CSS or use Inline CSS.
Here we discuss about inline CSS, In the Inline style we have to set the style prop to an object with the background property. Also, keep in mind the Best Practices for Inline Style in React for Best Usage.
Now we discuss about syntax of inline Style.
| import React from “react”;
export default function function_name(){ return( <div style={{ backgroundImage: “url( set url path)”,
// set background Image Properties
}} ></div> ); } |
Now discuss about different property of Background Image,
Background-Repeat:
How to set background image we will explain in this property. A background image can be repeated along the horizontal and vertical axes, or not repeated at all. Moreover, Hire React developers from Bosc Tech is a decent option for best usage of inline style. They are expert in the field of React while using the best CSS styles.
Syntex:
| background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
If Image is repeated as horizontal = background-repeat: repeat-x If Image is repeated as vertical = background-repeat: repeat-y If Image is no repeated = background-repeat: no-repeat |
Background-Position:
This property sets the initial position for each background image. Also set one or more position value separated by commas.
Syntex:
| background-position: value
background position value is = background-position: center background-position: top background-position: bottom |
Background-Attachment:
Background attachment sets background image scroll with full page or fixed.
Syntex:
| background-attachment: scroll | fixed | local | initial | inherit;
background attachment is = background-attachment: fixed background-attachment: scroll background-attachment: local |
Background-Blend-Mode:
This property defines the blending mode of each background layer and with the element’s background-color.
Syntex:
| background-blend-mode: normal | multiply | screen overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Example is : background-blend-mode: normal background-blend-mode: multiply background-blend-mode: overlay |
Background-Origin:
This property is used to set the origin of the image in the background. Property sets the background’s origin: from the border start, inside the border, or inside the padding.
three different values:
background-origin: content-box
background-origin: padding-box
background-origin: border-box
How to set multiple Background Image:
Syntex:
| backgroundImg:{
background: background1, background2, …, backgroundN; } Example: backgroundImg:{ background-image: url(img.png), url(img2.png); background-position: right bottom, left top; |
Here we discuss the example of inline style,
| import React from “react”;
export default function application(){ return( <div style={{ backgroundImage: “url(image URL)”, backgroundPosition: “right”, backgroundSize: “cover”, width: “300px”, height: “300px”, }} ></div> ); }
|
Here is an output of above code:
here we set backgroundImage to URL value of the image, backgroundposition to right to set the background image right, backgroundSize to cover , width to 300 px and height to 300px.
second thing is,
When you create your application with React App and you put your image inside /src then you must have to import image first and then you have to place is as a background image.
You have to just write below code above the function for import the image:
| import React from “react”;
import background from “./img/image.png”; |
Conclusion:
So far, we have seen that how we can set background image with inline CSS using style prop in React. Also, we can set multiple background image in React. In React we have various options to make background image more attractive while using different properties of React.
Thanks for reading the article. I hope you enjoyed reading. Also, do let us know your queries in the comment section.
