Background-image won't show

Question

I'm trying to have a background image in the header of my website but as of now it won't show. My file setup is as follows:

D:\ mywebsite

Image, home.css, index.html

Image rocks.jpg

The code I currently have is :

<div class="header-image" style=background-image: url("../Image/rocks.jpg")>
</div>

Edit

CSS:

#header .header-image {
    width: 100%;
    height: 400px;
    background-position: left center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Did you check the browser console? May be it is not finding the image, An error must appear in red letters — wilsotobianco, Feb 28 '16 at 16:25
possible duplicate http://stackoverflow.com/questions/5846637/why-an-inline-background-image-style-doesnt-work-in-chrome-10-and-internet-ex — The Reason, Feb 28 '16 at 16:28
@wilsotobianco in the devtool I get an 'invalid property value' but it's just a warning not an actual error — im brett, Feb 28 '16 at 16:41
your `style` syntax is wrong. It's not formatted as per html basic rules. Also try use proper images directory. — DebRaj, Feb 28 '16 at 17:46

score 2 · Answer 1 · 2016-02-28T17:11:07.423

2

Your style attribute should have quotation marks around the in-line css, and the .. in the file path will be sending you back a directory (and so must be removed), like so:

style =  'background-image:url("Image/rocks.jpg");'

EDIT: Note that you must use single quotes to surround the css or the double quotes within url("Image/rocks.jpg") will be interpreted as closing the quotes.

edited Feb 28 '16 at 17:11

answered Feb 28 '16 at 16:27

ailed to load resource: net::ERR_FILE_NOT_FOUND – im brett Feb 28 '16 at 18:08
Is the Image directory in the same place as index.html? – Feb 28 '16 at 18:13

score 0 · Answer 2 · answered Feb 28 '16 at 16:25

0

if your directory is setup like

D:\mywebsite\
D:\mywebsite\index.html
D:\mywebsite\Image\

Then this will be your answer

<div class="header-image" style=background-image: url("Image/rocks.jpg")>
</div>

answered Feb 28 '16 at 16:25

Josh S.

612
3
8

Background-image won't show

2 Answers2