How to Add Background Image using React JS | How to Set Image as Background in React JS

welcome to Webster address how to set background image in react background image can be used from CSS from SRC directory from public directory we can import image or use it without import so many ways in this video we will look into that but before that give this video a like subscribe to the channel if you haven't already because I am bringing similar content on this topic okay first let's use image from CSS file to do that this is our CSS file app.css and this is class BG background image properties and here is the background image URL images One Dot PNG this class BG is using image from SRC directory this is our SRC directory it has got images directory inside we've got one dot PNG so this path is for image that is in SRC directory to use it we have to apply this class to an element this is our component div class name BG save and here is our image one dot PNG and we've got few more images in public directory three four five and see it is not picking image from public directory so this is for images that are in SRC directory okay sometimes we have to use background images and the components for that we will have to use inline styles like this width and height background image URL notice back text so how about using inline background image using import see this logo it's being imported images logo dot SVG it is here in SRC directory logo dot SVG to use it as a background image while we use back text use it like this simple right this is a variable name with the dollar sign and curly braces inside back text you can use background image directly without importing it by using require like here require images 2 dot PNG save codes require won't need any import no need to import image it can use images directly from SRC directory you can use image from JavaScript object like see this import images from images index.js index.js file is being imported and this is that file in SRC directory index.js it's got an object const images and it's being exported IMG One img2 require one dot png2.png in same folder so it's got IMG one img2 let's use IMG one remove it images dot IMG one and you see this appeared here images dot IMG one and G2 like this to use background image from public directory use image directly like like public has got folder or directory images then we have got three four five dot PNG images 5 dot PNG say this image is being called just use the image path and then you can use Simple quotes here you can place slash here it will work you can place period slash it will work for public directory without codes it will work like this without slash it will work similarly to use an external image use external image path here and it will work so these are many ways we can set background image in react projects we can use CSS file for this we can fetch images for this from SRC folder from public folder or directory we can use images by importing them we can use images without importing them many different ways okay I hope it helped like share subscribe and I will see you in the next video

Channel: WebStylePress

Views: 46,589

Keywords: how to add background image react, how to add background image using react js, How to use background image in react from src directory, How to use background image in react using require, how to set image as background in react js, How to use background image in react, apply background image in react js, set background image react js, background image in react jsx, add background image react js, How to use background image in react using import, react background image url

Id: -atkwqLq1js

Length: 6min 16sec (376 seconds)

Published: Mon Jan 16 2023