CODEWITHSUNDEEP
cssbackground-image
JaredCubilla
JaredCubilla

Reputation: 598

CSS: Background-Image Not Showing Up

I'm attempting to design and create a chatbox UI for a personal project, but I've run into a problem with something...

I have a div that acts as an exit button for the chatbox. I have a .png that I want to use as the main appearance of that element. By using CSS's background: url(), I intended for it to be a background for that button, but it doesn't appear to be showing up.

I looked at the Chrome Dev Tools, but it said that it recognized the picture... it was linked properly, and the other attributes were showing, but for some reason, it simply wasn't appearing:

HTML:

<div class= "cB">
  <div class= "cB-header">
    <div class= "cB-buttons">
      <div class= "cB-exit"></div>
    </div>
    <div class= "cB-name">Ajeethen Uthayakumaran</div>
  </div>
  ...
</div>


CSS:

.cB {
    background-color: rgb(226, 226, 226);
    position:absolute;
    bottom:0;
    width: 260px;
    height: 350px;
    float:right;
}

.cB-header {
    background-color: rgb(0, 248, 66);
    width: 100%;
    height: 40px;
}
.cB-name {
    display:inline-block;
    width: 195px;
    font-family:Oswald;
    font-size: 16px;
    color: rgb(0, 112, 38);
    padding: 7px 10px 4px;
}
.cB-buttons {
    display:inline-block;
    float:right;
}

.cB-exit {
    display:inline-block;
    background: url(../img/exit.png) no-repeat;
    height: 40px;
    width: 40px;
}


Anyone have any ideas? If you need anything else besides the markup and the CSS, please do comment.

UPDATE: The file path is linked correctly... it is connected properly, and I can see it via the Dev Tools that Chrome has provided us...

However, I just realized that my image is 600 x 600, which is way bigger than my intended 40x40... does that change anything?

Upvotes: 1

Views: 1265

Answers (2)

JaredCubilla
JaredCubilla

Reputation: 598

Yay, I found out the answer!

I noticed that on the jsfiddle located on @user3739658's comment to my post was only showing the top-left corner. Due the fact that the image size was 600 x 600, it was only showing a corner of my image, which was transparent, and thus did not appear. It was not draggable either... background images are not draggable.

The height and width I wrote only declared the div size, but not the background-size... because I'm incredibly lazy today I solved this by using the CSS3 background-size rule...

background-size: 40px;

Doing this fixed everything, I guess. :)

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

As mentioned by @showdev

It works fine, here is the demo:

http://jsfiddle.net/jLNrv

Make sure your file path is correct!

Here is a brief description of the file paths:

./ means the current directory

../ means the parent of the current directory, not the root directory

/ is the root directory

myfile.text is in the current directory, as is ./myfile.text

../myfile.text is one level above you and /myfile.text lives in your root directory.

Upvotes: 1

Related Questions