CODEWITHSUNDEEP
htmlcss
Waleed Ahmed
Waleed Ahmed

Reputation: 23

CSS is not loading a local image?

I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element

.logo {
  background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>

Upvotes: 1

Views: 98

Answers (2)

Mohd Domais
Mohd Domais

Reputation: 43

The "logo" class must have a height in order to show its contents, you have several ways to set up the height:

01

inside your css, go to '.login' and between{ } write : height:100px;

result

.logo{
     height:100px
}

02

Inline like this

<div class="logo" style="height:100px"></div>

03

Using jQuery, like this

$('.logo').height(100);

or

$('.logo').css('height','100px');

Upvotes: 0

Quentin
Quentin

Reputation: 944297

The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.

Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.

With a canvas size of 0, there is no space to display the image on.

Do something to give it a height.

.logo {
  background: url(https://placekitten.com/100/100);
}
<div class="logo">
    Here is some content.
</div>

That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.

<div class="logo">
    <img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>

Upvotes: 2

Related Questions