Image not displaying in div

Question

Im trying to get an background image displayed in a button div but its not showing up.

Changing background-image to background-color works and it displays a color in the correct spot the image should of been.

Im drawing a blank here: jsfiddle

This is the piece of code:

.strawberry {
height:65px;
width:100%;
background-image: url('src/bg_button.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
overflow:hidden;
}

Im new to html5 so please be gentle.

score 2 · Answer 1 · edited May 02 '14 at 23:47

2

It is possible that you are not in the correct folder try this:

.strawberry {
    height: 65px;
    width: 100%;
    background: url("../src/bg_button.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
}

edited May 02 '14 at 23:47

Anonymous

11,748
6
35
57

answered May 02 '14 at 23:45

I am Cavic

1,115
1
10
22

1

Confirm, code works fine when I plug an image URL in. – dcclassics May 02 '14 at 23:46
great :), it was just over top of my head – I am Cavic May 02 '14 at 23:47

score 0 · Answer 2 · edited May 23 '17 at 10:32

In a jsfiddle, an image referenced that way will need to be gotten from somewhere on the web. When I load your fiddle in Chrome, I get 404 not found errors:

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/m6AnC/13/show/src/bg.png http://fiddle.jshell.net/m6AnC/13/show/src/header.jpg http://fiddle.jshell.net/m6AnC/13/show/src/bg_button.jpg

See: Adding images in JSfiddle

Image not displaying in div

2 Answers2