CODEWITHSUNDEEP
htmlcssbackground-imagedivide
iixCarbonxZz
iixCarbonxZz

Reputation: 17

CSS | Div background-image

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.

Upvotes: 0

Views: 674

Answers (2)

Rahul Kashyap
Rahul Kashyap

Reputation: 977

Try to use hope this could work.

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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')

Upvotes: 0

Related Questions