CODEWITHSUNDEEP
cssbackground-image
secre.swallowtail
secre.swallowtail

Reputation: 89

background-image not working on any browser

I am working on putting background images on my header and footer. When I click on design tab on VS it seems to be working but when I execute the web application, the background images won't show.

My stylesheet

#Header {
    height: 150px;
    width:1020px;
    background-color:gray;
    background-image:url('images\bg-image.png');
    background-position-x:right;
    font-size:30px;
    font-family:Arial;
}

#Footer {
    background-color:gray;
    background-image:url("e:\...\images\footer-image.png");
    width:1020px;
    height:80px;
    text-align:center;
    font-family:Arial;
    font-size:13px;
    margin-top:5px;
}

As you will noticed, I've tried changing the path of the images but it's still giving me the same results.

My VS image directory

My VS image directory

Result when executed (I've tried on IE, Chrome, FF)

Result

I hope someone will help me on this. Thank you!

Upvotes: 0

Views: 60

Answers (3)

Michael Bassili
Michael Bassili

Reputation: 31

Pathname problem. enter code herelike so:

#Header {
height: 150px;
width:1020px;
background-color:gray;
background-image:url('images/bg-image.png');
background-position-x:right;
font-size:30px;
font-family:Arial;
}

#Footer {
background-color:gray;
background-image:url("e:/.../images/footer-image.png");
width:1020px;
height:80px;
text-align:center;
font-family:Arial;
font-size:13px;
margin-top:5px;
}

Upvotes: 2

Oriol
Oriol

Reputation: 288100

Don't use url("e:\...\images\footer-image.png").

Instead, you can try file scheme:

url("file:///e:/.../images/footer-image.png")

However, you can only use it if the webpage is accessed using file scheme too. In your screenshot you are using http, so it won't work because of security reasons.

Then, the best option can be relative urls, that will work both with http and file:

url('images/bg-image.png');

Note the use of the slash / instead of the backward one \.

Upvotes: 2

John Conde
John Conde

Reputation: 219804

This is almost certainly a path issue. Try using the full path from the web root:

/* Assuming the images directory is in the web root.*/
background-image:url('/images/bg-image.png');

Upvotes: 3

Related Questions