Can't move the background-image code from CSS file to HTML file.

Basically, I'd want to change the background image code from the.css file to the.html page. The image does not appear on my website when I do this.

The picture (photo.png) is successfully shown and I use the following code.

<div class="select-resource">

.select-resource {
 margin-bottom:5px;
 background-position: 400px -5px;
}

But, I need to use the next code, but still the picture does not appear when I do so. The code is as follows:

<div class="select-resource" style="background-image: url(img/photo.png);">

.select-resource {
 margin-bottom:5px;
background-position: 400px -5px;
}

Is there anyone who can guide me with this?

Comments

Joseph Morgan

13 Feb 2022

This must be because the URL is missing, when you use url() in CSS file it uses the location from the CSS file & when you move it to HTML it should be different because both HTML & CSS are not in the same Folder

Mahmoud Santos

21 Feb 2022

try to add single quotes like :

background-image: url('path');

<div class="select-resource" style="background-image: url('img/photo.png');">

hope it worked