Search code examples
htmlcssimagebackground-image

CSS: background-image not working properly

I am just starting out in the web development world so I am a beginner when it comes to html and css.

I am trying to create a background image for a paragraph of text on my web page but the image will not load for some reason.

Image URL
I am 100% sure I have the URL correct (the file is stored on a local directory) because using an image tag,

img src='C:/..../myimage.png'

works perfectly fine. Using background-image in CSS with this directory does not work though.

I am also trying out different IDEs to see which I like best. I started out using notepad++ and chrome browser. Using this, the background-image works fine. If I use Brackets, the background image does not show, even though it uses chrome as a live feedback tool.

Could someone please help me understand why this is not working?

Here is the html and css I have written. Thank you for any help you can give.

HTML:

<p id='bgimgex'>Here is a paragraph of text which has a background image</p>

CSS

#bgimgex{

    font-size:1.7em;
    color:cyan;
    margin:auto;
    width:50vw;
    background-position:center;
    background-image:url('C:/Users/Adad Dayos/Desktop/phase 2/course work/HTML series/HTML5_course_1/mod 5/images/melly.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
}
Solution

  • simply copy your image into your project directory and avoid using space (or ... ) in your sub-folder names .

    if the problem still not solved please check your console in chrome (press F12) and see what is the error .