background-image isn't displaying

Question

I am trying to display my logo from CSS and it will not display.

When I inspect the element it shows that the image is there but will not appear on the web page.

CODE

#logo_image {
  margin-top: 13px;
  float: left;
  background: url(images/logo_color.png) no-repeat;
  padding: 8px 16px 8px 16px;
}

<a href="index.html" id="logo_terra"></a>

Firstly, your CSS declaration should be #logo_terra { ... } to match your existing markup. Secondly, it's worth noting that using a URL-based background is going to cause your image to be referenced relative to where the CSS definition is. If it's in an external file, then the URL will need to be relative to that, if it is defined within an actual HTML page, then the same thing applies. Have you tried defining it as an absolute URL to see if that works? — Rion Williams
– Rion Williams, Commented Jun 2, 2016 at 19:27
Also the CSS is referencing ID "#logo_image" while the HTML is using ID "#logo_terra" — PFlans
– PFlans, Commented Jun 2, 2016 at 19:28

dippas · Accepted Answer · 2016-06-02 19:29:06Z

3

your ID is wrong, just change to #logo_terra, plus you should have width and height, otherwise you only will have the padding size

#logo_terra {
  margin-top: 13px;
  float: left;
  background: url(//lorempixel.com/100/100) no-repeat;
  padding: 8px 16px;
  width: 100px;
  height: 100px
}

<a href="index.html" id="logo_terra"></a>

answered Jun 2, 2016 at 19:29

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Madan Bhandari Over a year ago

I want ask you something not related to this topic, in which chatroom you are available or how can I contact you ?

dippas Over a year ago

@MadanBhandari in my profile you have my contacts, feel free to reach me there.

Ivan Santiago · Accepted Answer · 2016-06-02 19:27:28Z

0

id is wrong in CSS

Should be #logo_terra

answered Jun 2, 2016 at 19:27

Ivan Santiago

1,7821 gold badge17 silver badges13 bronze badges

Comments

TheEarlyMan · Accepted Answer · 2016-06-02 19:33:37Z

0

Hi your CSS doesn't refer to the ID of your HTML. You have an id called "logo_terra" so you have to refer this same ID to CSS also. So make sure you refer #logo_terra, instead of #logo_img.

Second: MOST IMPORTANT for NEWBIES:

Your image must be in the folder that is relative to your CSS stylesheet. It depends on where you have saved the images.

answered Jun 2, 2016 at 19:33

TheEarlyMan

4025 silver badges15 bronze badges

Collectives™ on Stack Overflow

background-image isn't displaying

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related