Image is not displaying in my page.
<div class="rating" style="width:25%;float:right;height:100px">
<span class="truckIcon">
<!-- <img src="../images/logo/favicon.png">
</span> -->
</div>
css:
.truckIcon{
background-image: url(../images/icons/favicon.png);no-repeat !important;
width:80px;
height:80px;
}
This is my css path: \ulmt\html\css\style.css
This is my image path: \ulmt\html\images\icons\favicon.png
Is anything wrong here?
.truckIcon is line-element so that you need to add display:inline-block for that and one more thing background-image not work with no-repeat so that you need to add background-repeat: no-repeat !important;
.truckIcon{
background-image: url(../images/icons/favicon.png);
background-repeat: no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
background-image not support no-repeat so try with this:
.truckIcon{
background: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
just remove the semicolon before no-repeat. The style should be
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
}
Remove semicolon ; just before no-repeat from the image url in your CSS, like:
.truckIcon {
background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
Hope this helps!
span is a inline element. so you need to style display: block; or display:inline-block;
also uncomment your close span tag after img tag
.truckIcon{
background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display:inline-block;
}
you have used span element which is an inline element. so your width and height will not be applied on it. To make it work add a property called display:inline-block;
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
just simply change this CSS it would defiantly work.
.truckIcon{background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
display:inlin-block;
}
Related
I am attempting to display a background non-repeated picture on the top right corner of my div. I am using the following code
<html>
<head>
<style>
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
.UseA .dta
{
display:block;
border-radius: 10px;
width:130px;
background-color:grey;
color:white;
position:relative; /*Relative to normal position*/
left:160px; /*Move away from left*/
}
</style>
</head>
<body>
<div class="UseA">
Hello , My name is Jim
<div class="dta">something here</div>
</div>
</body>
</html>
However The image is not being displayed.
I am trying this code out here Any suggestions on what I might be doing wrong ?
You declare background: #BADA55; after background-image, so it's overwriting it.
Try this instead:
UseA {
display:block;
text-indent:10px;
border-radius: 10px;
background: #BADA55 url('paper.gif') no-repeat top right;
min-height:50px;
width:300px;
}
You're overwriting background-image with background. Combine them:
http://jsfiddle.net/isherwood/ANr6K/
background: url('image.png') right top no-repeat #BADA55;
If your papaer.gif asset is correct, then remove your background color for .UseA
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
Change to
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
min-height:50px;
width:300px;
}
Sample on Fiddle using Google image as a background: http://jsfiddle.net/C9qdL/
I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
Don't know how to fix it. I've trying to make different logotypes, depending on class of the tag. The html is:
<div id="header">
<a href="/index.php" id="logo" class="cet">
<h1 id="l">title</h1>
</a>
</div>
And css is:
#header {
height:204px;
background: url(../img/il-01.jpg) no-repeat 400px 2em;
position:relative;
clear:both;
}
#header #logo {
display:block;
position:absolute;
left:2em;
top:3em;
width:355px;
height:107px;
overflow:hidden;
}
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
#header #logo.cet {background: url( ../img/logo_cet.png) no-repeat -10px -40px;}
And if the class is set for 'cat' everything is just fine, but if it's set for 'cet' i can not see the image in IE6. In any other browser the background displays correctly.
The background images are little different by size, can it be the problem?
Thank you very much for your answers
You are not allowed mix lengths and keywords for the background(-positon). Old CSS versions didn't allow it, so older browsers may not support it. Instead of
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
use
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px 0; }
BTW, You need to check your HTML. A block element such as <h1> may not be inside a link (<a>).
I have a span that is generated through javascript, with its css class as follows:
.class1{
width:25px;
height:25px;
background-image: url(pic.png);
background-repeat:no-repeat;
background-position: center;
cursor:pointer;
margin-left:10px;
}
The problem is on, the html page, i can see the pointer -cursor, but not the background image,over the span, in IE7.
In IE6, both get shown , no problems.
Span, by definition, is an inline element, try adding display:block; or display:inline-block; to .class1. Also add height and width of your image.
Like so:
.class1{
width:25px;
height:25px;
background-image: url(pic.png);
background-repeat:no-repeat;
background-position: center;
cursor:pointer;
margin-left:10px;
display:block; /*or inline-block*/
height:100px;
width:100px; /*img height and width*/
}