'How do I add a background image in CSS with the image located in my project file?

I'm new to coding. Currently working on a digital resume. I'd like to add a background image in CSS without using a url. The image is located in my project file.

I have tried to load the image in chrome and I took the url from that to css, but it didn't load. Any help? Thanks

htmlcss


Solution 1:[1]

Maybe your CSS file is not in the same directory as your image, you may need to use relative path URL, here I'll show an example:

Example directory arrangement

If your CSS file is inside the css folder, and your image is inside the img folder, then you need to write your URL in your CSS file this way:

background-image: url("../img/your-background.png");

Solution 2:[2]

I'd say it be easiest if you used CSS to add the background image to your HTMl element. You can either use inline styles or create a css class in a separate file that you import in your HTML file. https://www.w3schools.com/cssref/pr_background-image.asp

An example for this would be:

HTML:

HTMl elements to add a picture

CSS:

CSS to add background image

Make sure you use the relative path to your image file. Otherwise it will not load.

Otherwise you could use the HTML image tag: https://www.w3schools.com/tags/tag_img.asp

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Almaz Hong
Solution 2 Lukas M.

Related Questions