CODEWITHSUNDEEP
csshtmlimage
dillonbrannick
dillonbrannick

Reputation: 322

Rollover images not displaying in browser

I've been building a website. I've just been testing it locally, and everything works as it should, but when I tested it online some of the images didn't load.

The images are not only images but css rollover links, and there are 10 of them, all with the same problem.

Here is the CSS code:

.art-links{
width:150px;
height:150px;
display:block;
}
.art-links:hover{
background-position:left 150px;
}

#art1{
margin: -300px 0 0 -300px;
background-image:url

('https://dl.dropbox.com/u/70582811/Website/Artwork/Buttons/art1.jpg');
}

Here is the HTML code:

<a href="#art1" onclick="toggle_on('art1_big'); toggle_on('artbg'); toggle_on('back_off'); 
toggle_on('next1'); toggle_on('prev1'); toggle_off('artwork')">
<div class="centre art-links" id="art1">
</div>
</a>

That is the code of just one of the images.

The images do not display in Chrome, Firefox or IE. In both Chrome and Firefox the buttons are still there and usable, but the images are not. In IE however there is nothing.

You can see the problem here: http://testerwebby.tumblr.com/ (click artwork top left image, to get to the problem).

Upvotes: 0

Views: 551

Answers (1)

BenM
BenM

Reputation: 53208

You should have no space in your background-image property between url and (. Removing the space and setting:

background-image: url('https://dl.dropbox.com/u/70582811/Website/Artwork/Buttons/art2.jpg');

Worked fine for me.

Upvotes: 2

Related Questions