CSS | Div background-image

Question

I am looking for an example of working code or an explanation of what I have done wrong concerning this code.

The aim here was to have a div displaying an image below the overlay div which is behind the text and button. The image would be displayed by 'div.imageBack' which would appear darkened behind 'div.overlay'.

The HTML is completely controlled by the one CSS file(main.css) of which I have supplied what I consider relevant. Included also is the HTML in question and a snapshot of the HTML at present.

More can be supplied if necessary.

home.html

<div class="imageBack">
<div class="overlay">
    <center> 
        <p class="headerLarge">Discover Your Past</p>
        <a class="button" href="start.html">
            <div class="button">
                <p class="button">Start Now</p>
            </div>
        </a>
    </center>

</div>

main.css

div.overlay{
height: 1000px;
margin-left: -10px;
margin-right: -10px;
margin-top: -75px;


background: linear-gradient(rgba(0, 0, 0, 0.8) 50%, rgba(77, 166, 255, 1));


}

div.imageBack{
 height: 1000px;
 margin-left: -10px;
 margin-right: -10px;
 margin-top: -75px;


 background-image: url('C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')
}

HTML code at present

Snapshot:

All answers are appreciated.

Answer 1

尝试使用希望这可以工作。

background-image: url('../img/body/forest.png');

Answer 2

You have this code:

background-image: url('C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')

That's not a good idea, but however if you want to read from your hard disk drive the image with absolute paths (with relative paths you don't have this problem) set the protocol file://

Absolute path:

background-image: url('file://C:\Users\iixCarbonxZz\Documents\html and javascript\Holmes & Watson [Mr Osbourne]\img\body\forest.png')

Relative path:

background-image: url('img/body/forest.png')