CODEWITHSUNDEEP
css
Justin Grant
Justin Grant

Reputation: 46673

URL works fine as IMG SRC, but not as a DIV's background-image

Why won't the HTML and CSS below show the DIV with a background-image? The same URL works fine as the SRC of an IMG element. https://jsfiddle.net/52ft1erg/1/

<style>
img, div { height: 100px; width: 100px}
div { background-image: url (https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]) }
</style>

<div>This is a DIV</div>

This is an IMG: <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]" />

Upvotes: 1

Views: 62

Answers (1)

Justin Grant
Justin Grant

Reputation: 46673

Turns out the problem was the space after "url". Arrrgh. url (https://... won't work but url(https://... will.

I wasted 20 minutes on this before realizing my (dumb) mistake.

I looked around SO for a while to see if this was a duplicate, and although there are several other reasons that background-image will fail while IMG SRC will succeed (e.g. spaces in the filename, lack of height/width on the element, browser differences, etc.) I couldn't find this particular root cause. So sharing as a Q&A on StackOverflow to prevent others from wasting their time too.

Upvotes: 2

Related Questions