Issue with CSS background image (Image not Showing)


Tags: html,css,css3

Problem :

I am having a problem with a background image not showing.

I have a class that I've added to an anchor tag.

<a class="my-class"></a>

and the css for the class is:

.my-class {
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center
 }

The problem is that the background image is not showing.

I know it's there because when I do this:

<a class="my-class">&NBSP;</a>

part of the image shows.

Anyone have any idea on how to make the whole image show without having to insert lots of &nbsp; 's please?



Solution :

<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then define the size of the element.

Try with:

.my-class {
    display:     block;
    width:       128px;
    height:      128px;
    background:  transparent url("../images/my-bg-image.png") no-repeat 0 center
}

For more information you can check the box model and the display property on the CSS 2.1 w3c standard.

Also the sections The width property and Computing widths and margins have an explanation of why the element doesn't show the background on an empty inline element.

Update:

Also the working draft of the CSS Box Model is available on the W3C site.

Update 2:

On a side note, relying only on a css background image for a link can have somme accessibility issues.


    CSS Howto..

    How to convert a CSS3 2D animatuon to a 3D Transform

    How do you make a filter for images that have tags?

    How to display “a” to full of the line

    how do I make overflowing and float positioned elements stay all on one line?

    How to keep pure-HTML-&-CSS collapsible panels open when another one is opened?

    How to select two elements with “> span” in CSS?

    How can I get this effect (on height) with jquery?

    How to put images behind each other in css

    How do I get the (element with the) highest CSS z-index in a document?

    How to access dynamic div inside any div using CSS

    How to create responsive text on top of an image?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    How To Embed font-awesome CSS into DOM Scripting (javascript)?

    How to set min-height for bootstrap container

    DropDown Menu won't show for more than a second..not working.

    How to style Text input in jQuery editable

    How to make my CSS responsive

    How to make a menu centered using CSS

    How to refresh to top of HTML page using css

    How to add a shadow for underline (bottom border) in css

    How to use nth-child with :hover to style multiple children?

    How can I make a fixed background image not stay fixed on scroll?

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to highlight a whole table cell with padding when hovering?

    How to apply IE Fixes for LESS CSS [closed]

    How to create a completely flexible piano keyboard with HTML and CSS

    how to add active css class to a link in Wordpress

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    How to get element by its partial class name CSS

    How To Left Align the Title Using CSS