I don't know what is going on but it seems that the background image isn't loading.
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
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.
This question is related to
html
css
background-image
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;
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
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:
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
<div class="pToolSlidePanel"></div>
</div>
Hope this helps.
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
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: " ";
}
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.
<html>
<head>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
<div class="pToolSlidePanel">Test text</div>
</div>
</body>
</html>
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.
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..
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
That's empty. Try adding a non breaking space to give the link and span some contents:
<span class="btn-pTool">
<a class="btn-pToolName" href="#"> </a>
</span>
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 <p> instead of <span>. Some browsers might let you put a background in a span, but not all will (perhaps older versions of IE).
@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).
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;
}
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<a> 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
Add "display:block;" in your .btn-pTool class
I faced this problem. My html was as below:
<th style="background-image:url('Image.png');">
</th>
I added " " as @shankhan suggested inside th and the image started showing up.
<th style="background-image:url('Image.png');">
</th>
Source: Stackoverflow.com