Can someone help me to find my Problem ?
I have a <img /> and will give him a background-image within a <a> tag.
Here is my example:
<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url(\'./images/system/button/close/close.png)\' no-repeat" />
Background-Color didn't work to.. :-( My Example is a JavaScript String, thats the reason why I'm escaping the URL
Thank's for help :-)
you dont even need the quote marks.
background:url(./images/system/button/close/close.png)
use a div if you can
<div style="height:20px; width:20px; padding:9px; background:url(./images/system/button/close/close.png) no-repeat red"></div>
You are escaping your quote marks and have transposed the second quote mark and bracket.
In CSS:
url('foo') /* is technically fine but broken on IE/Mac */
url(foo) /* is fine */
url('foo)' /* is not fine */
url(\'foo\') /* is not fine */
And as Ross points out in a comment, your src attribute is missing. I imagine that setting a background-image on an image with a translucent background will work, but if you don't have a content image, don't use an <img> element (and don't hide any content images you do have in in background-image properties).
Don't understand why you are escaping the quotes.
<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url('./images/system/button/close/close.png') no-repeat" />
Does that work?
And are you sure about the . in the URL?
background-color:red; is being superseded by background:.
Combine your backgrounds. You can then refine it further by removing the quotes in the URL() of the background and the period from the URL. if it is relative to the location of the page it is on just remove the backslash.
<img border="0" style="display:block; width:20px; height:20px; padding:9px; background:#F00 url(images/system/button/close/close.png) no-repeat" />
Last if you need to have an alt attribute its contents will show up since there is no source. Use a transparent image if you add the alt.
Well, even if it's weird to use the <img/> tag for this. (it's not its purpose, use src or a div with background...)
Here, it's working
Related
I need to remove border/outline ( I don't know what exactly is ) from an image loaded in Span using CSS.
This is the HTML code:
<div>
<span class="BG"><img class="EU"></span>
</div>
And this is the CSS:
.BG{
background-color: #017b5b!important;
display:block;
}
.EU{
background-image: url('http://bet.dn1.it/images/broker.png');
background-position: -190px -362px;
width: 189px;
height: 50px;
display:block;
margin:0 auto;
}
You can find the example here: JsFiddle
Thank you very much to support.
Ciao
Since you are using background-image, change the html element.
You can use a span for example.
JSFIDDLE
https://jsfiddle.net/3vwjc26t/
<div>
<span class="BG"><span class="EU"></span></span>
</div>
You dont need an img tag for this. Just use a div.
<div>
<span class="BG"><div class="EU"></div></span>
</div>
This is because you are using a <img> element without a src attribute, since you are using CSS to add it as background-image you should switch to a different element type like a <span> or <div>.
Like so:
<div>
<span class="BG"><span class="EU"></span></span>
</div>
Edited Fiddle
So there are two things that you can do.
1. If you must use the <img> tag you can create a blank.gif (1px x 1px) transparent image and set the source to blank.gif <img src="blank.gif" class="EU">
2. As everyone else has said you can just change your <img> tag to a <span> or <div>
The default behavior of an <img> tag that does not reference an image or a valid image is to set a border around it. There does not seem to be a way to remove this border.
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I am having issues trying to replace this image with CSS, I have no access to the html.
http://jsfiddle.net/ES4mH/
<img
width="64"
height="64"
border="0"
style="width: 64px; height: 64px;"
src="http://www.nitrografixx.com/2013/lock-icon.gif">
</img>
I tried this, and while it adds the image as a background to the current image, it doesn't replace it.
img[src='http://www.nitrografixx.com/2013/lock-icon.gif'] {
background: url(http://www.nitrografixx.com/2013/lock_bg.jpg) center !important;
}
try this
<style>
.className{
content:url("http://www.nitrografixx.com/2013/lock_bg.jpg");
}
</style>
<img class="className"/>
What you are doing is adding the image to the background of the image element but the image element still has the source attribute pointing to the original image and that's why it's not being removed. You should probably use javscript to remove the element and replace it with something else if that's possible.
I'm working on this website http://www.eluminatecreative.com/new/index.html and where it says "sum'r fling" I need to replace it with another img but I can't find it anywhere and I can't replace the spacer img with an image and have it work the same. What is causing this and how can I replace it? Is this some kind of jQuery code I'm not seeing?
Look at the class attached to the spacer <img>
<img src="images/spacer.gif" width="405" height="52" alt="" class="myimage">
If you look at the corresponding CSS:
.yellow_li:hover .myimage {
background:url(../images/summr.png) repeat-y center bottom;
}
So, replace this image: http://www.eluminatecreative.com/images/summr.png
HTML:
<html>
<body>
<header>
<img class="logo" />
</header>
</body>
</html>
CSS:
* {
margin:0px;
padding:0px;
border:none;
}
img.logo {
width:126px;
height:50px;
background-image:url('images/logo.png');
}
One way or another everytime i try to style an IMG like this a strange border appears. Even if I would place border:0px; or border:none; in the img.logo css the border remains.
It's the default "special" border that appears when you use an img element with an a src attribute set to something that doesn't exist (or no src at all).
A common workaround is to set the src to a blank.gif file:
<img class="logo" src="blank.gif" />
I have to point out that it (in this case) makes no sense to use an <img> with background-image. Just set the src attribute and forget about background-image.
You can Simply Use div instead of img for background image , if you are not going to use src attribute anywhere.
<div class="logo"> </div>
otherwise src is required.
Combining #thirtydot's answer to this question with #Layke's answer for Smallest data URI image possible for a transparent image, here is an all-in-one solution:
<img class="logo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
This works for me
img {
text-indent: -999px;
}
I had the same issue, but now the border does not appear.
Solution:
Add following in the img tag in HTML
src=""
border="0"