CSS background-image not working

Question

I don t know what is going on but it seems that the background image isn t loading   test html    lt div class  pToolContainer  gt        lt span class  btn-pTool  gt            lt a class  btn-pToolName  href     gt  lt  a gt        lt  span gt        lt div class  pToolSlidePanel  gt  lt  div gt   lt  div gt    style css        btn-pTool      margin 0      padding 0      background-image  url slide button png       background-repeat no-repeat              btn-pToolName          text-align  center           width  26px           height  190px           display  block           color   fff           text-decoration  none            font-family  Arial  Helvetica  sans-serif            font-weight  bold           font-size  1em           line-height  32px           By the way the image does exist in the folder of test html

User · Answer

lt span class  btn-pTool  gt    lt a class  btn-pToolName  href     gt  lt  a gt    lt  span gt    That s empty  Try adding a non breaking space to give the link and span some contents     lt span class  btn-pTool  gt    lt a class  btn-pToolName  href     gt  amp nbsp  lt  a gt    lt  span gt    It s also worth noting that the CSS spec says that you can t give a span a background image because spans are not block elements  Put the background image code in the div s class style  or use  lt p gt  instead of  lt span gt   Some browsers might let you put a background in a span  but not all will  perhaps older versions of IE

User · Answer

TheBigO  that s not correct   Spans can have background images  tested in IE8 and Chrome as a sanity check    The issue is that the a btn-pToolName is marked as display  block   This causes webkit browsers to no longer show the background in the outer span   IE seems to render it how the OP is wanting   OP chance the  btn-pTool class to be display  inline-block to make it work like a span div hybrid  take the background  but not cause a break in the layout

User · Answer

I have tried your code and found that if we put background-image  url image png   in btn-pToolName and change color  000000  it displays the image at background   my test css               btn-pTool                   margin  0                  padding  0                              btn-pToolName                   text-align  center                  width  26px                  height  190px                  display  block                  color   000000                  text-decoration  none                  font-family  Arial  Helvetica  sans-serif                  font-weight  bold                  font-size  1em                  line-height  32px                  background-image  url defalut png                   background-repeat  no-repeat                  and test html            lt div class  pToolContainer  gt               lt span class  btn-pTool  gt  lt a class  btn-pToolName  href     gt adad lt  a gt  lt  span gt               lt div class  pToolSlidePanel  gt  lt  div gt           lt  div gt    Hope this helps

User · Answer

1 Use this code in stylesheet  body     background  URL  slide button png      background-size  100  100     background-repeat  no repeat    2 Put img and html file together in single folder 3 IF not worked try converting png file to jpg for that just upload pic on facebook and then download that pic from facebook it will automatically converted into jpg and while uploading tick mark private setting so that ur friends cant view that image 4 if still not work imform me

User · Answer

The code below works  Replace the text within the single quotes with your image name  If it is in the same folder  if not add    foldername  yourimagename  I hope that helps    NOTE   use of the single quotes by most of the programmers is not advised but I use it and it works  Also  if you would write a PHP you would appreciate what it can do i e  add the background image automatically from the variable etc    lt html gt   lt head gt   lt style type  text css  gt   btn-pTool  margin 0  padding 0  background-image  url  your name of the field    height 100px  width 200px  display block      btn-pToolName      text-align  center       width  26px       height  190px       display  block       color   fff       text-decoration  none        font-family  Arial  Helvetica  sans-serif        font-weight  bold       font-size  1em       line-height  32px              lt  style gt       lt  head gt       lt body gt       lt div class  pToolContainer  gt       lt span class  btn-pTool  gt  lt a class  btn-pToolName  href     gt Test text lt  a gt  lt  span gt       lt div class  pToolSlidePanel  gt Test text lt  div gt       lt  div gt       lt  body gt       lt  html gt

User · Answer

In addition to display block OR display inline-block  Try giving sufficient padding to your  btn-pToolName and make sure you have the correct values for background-position

User · Answer

Add  display block   in your  btn-pTool class

User · Answer

Use this one to add background---  background-image  url  images-path      You can also add repeat or no-repeat function in it   background  url  images-path     no-repeat 00

User · Answer

lt span class  btn-pTool  gt            lt a class  btn-pToolName  href     gt  lt  a gt        lt  span gt    Try to add display block to  btn-pTool  and give it a width and height   Also in your code both tbn-pTool and btn-pToolName have no text content  so that may result in them not being displayed at all   You can try to force come content in them this way   btn-pTool   btn-pToolName       content

User · Answer

The easy way is that  copy and past this background-image  url    slide button png   instead of background-image  url slide button png   In such case we need to use     before path  Either you need to give full path  One other thing is that  in case before doing any change just clear the browser history and then refresh the page

User · Answer

I faced this problem  My html was as below    lt th style  background-image url  Image png     gt   lt  th gt    I added   amp nbsp  as  shankhan suggested inside th and the image started showing up    lt th style  background-image url  Image png     gt      amp nbsp   lt  th gt

User · Answer

Use shorthand property for the background property and type the folder name where thje image had been located    btn-pTool      margin 0      padding 0      background url     folder name slide button png   no-repeat                   btn-pToolName      text-align  center       width  26px       height  190px       display  block       color   fff       text-decoration  none        font-family  Arial  Helvetica  sans-serif        font-weight  bold       font-size  1em       line-height  32px

User · Answer

You have applied class  btn-pTool  to span which is an inline element    give display block to it and also add some text inside the lt a gt  tag and the see the result   Also give a background color and background position as well to the image though default background position is there   but try doing it this way

[html] CSS background-image not working

Examples related to html

Examples related to css

Examples related to background-image