Visual studio - background-image issue-CodePudding

I tried to do an animated div with background-image and after some attempts the "url(../pic1.jpg);" part is not giving the picture witch is added to project. On VS Code it works fine, and after I put any URL to picture for example from google it also works. What is wrong?

Code Here:

<style>
    .huge-ball {
        position: absolute;
        height: 300px;
        width: 300px;
        border-radius: 100%;
        z-index: 5;
    }

    .left-bottom {
        left: -60px;
        bottom: -60px;
        background-image: url('../pic1.jpg');
    }

    .right-bottom {
        right: -60px;
        bottom: -60px;
    }

</style>

<div>
    <div>
        <div >

        </div>
        <div >

        </div>
    </div>
</div>

CodePudding user response：

There could be several reasons why the background image is not displaying properly.

One possibility is that the image file's path is incorrect. Check that the image file path is correct and that the image file is in the correct directory.
Another possibility is that the file name is incorrect or that the file type is incompatible. Check that the file name is correctly spelled and that it is in a supported format such as.jpg,.png, or.gif.
Another reason could be that the image is taking too long to load, or that it is being blocked by a browser's content security policy. You can try to open the image in a browser by copying the url and pasting it into the url bar of your browser and seeing if it loads.
Finally, there could be a CSS issue preventing the background image from being displayed properly. Check for any other CSS styles that might conflict with the styles you've written for the.left-bottom class.

CodePudding user response：

background-image: url('../pic1.jpg');

Depending on where the image is relative to the compiled stylesheet, the path in the url() bit will need to change. If the image is in the same folder as the stylesheet, then the style would just be the below.

background-image: url('pic1.jpg');

It may be helpful to understand relative/absolute paths if that is the issue here.