CODEWITHSUNDEEP
htmlcss
Domi Szécskai
Domi Szécskai

Reputation: 47

Background doesn't show up in div

I made a div element with a unique class, then i gave the class a background image, but it doesn't show up. Even if I inspect the element everything is there, except that one line about the background image.

My code:

.godzillahatter{
background-image: url ("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; }

Inspect element:

.godzillahatter {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}

And the url: http://honlapkell.hu/verzio1/godzilla/

I have no idea what is the problem. The div element has content, but i tried that to give it height and width just for sure. I searched for solution, but none of them works.

Upvotes: 2

Views: 106

Answers (5)

Rahul Desai
Rahul Desai

Reputation: 15501

Tested and verified!

Use background property instead and remove the space after url.

background: url("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

Output:

enter image description here

EDIT: As pointed out by others, it will work if you just remove the space after the url.

Upvotes: 2

Gaurav Ramanan
Gaurav Ramanan

Reputation: 3653

Welcome to SO!

Change this 

background-image: url ("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

to this

background-image: url("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

No space between url and (

Friendly piece of advice: Whenever you see a Yellow triangle like this in Chrome's inspector, it usually means your CSS syntax is wrong. enter image description here

Upvotes: 4

lolbas
lolbas

Reputation: 802

background-images url better to be without quotes, also if you use external source, use double slash // instead of http://

For less css code combine background properties into one line:

.godzillahatter
{
 background: url(//honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg) no-repeat center center fixed;
}

Upvotes: 0

John
John

Reputation: 3702

Remove the space between url and the bracket:

background-image: url("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

remove extra space after url 

background-image: url ("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

should be 

background-image: url("http://honlapkell.hu/verzio1/wp-content/uploads/2014/12/dalmatian-texture-1543316.jpg");

Upvotes: 1

Related Questions