I saw this Interactive Particle Logo on Codepen and I would like to add something smaller to my site. However, I couldn't understand how can I change it and add my own logo. I believe I need to change what is inside the data-src in the index.html and #hintImg in the style.less and provide my logo. Still, I don't know how to do this it is not like the simple img src where I can just upload the photo from my PC or paste the URL.
Source: https://codepen.io/Zaku/pen/EDaun
index.html
<body id="particle-slider">
<div class="slides">
<div id="first-slide" class="slide" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQCAMAAABh+/QGAAAC9FBMVEXu7u7u7u7////5+fn////u7u78/Pz7+/v////////////5+fn////////////7+/v////////////39/f////6+vr+/v76+vr////////39/f////v7+/9/f3v7+/////////+/v74+Pj////////////////////8/Pz5+fn////////////w8PD+/v7z8/P////7+/v////////9/f3u7u7////////4+Pj////////////////////////////////////u7u7////6+vr////09PT////////////////////////////////4+Pj////////y8vL////////////////////////v7+/////////////09PTu7u79/f3////////39/f////////////////////////////////////////////8/Pz////29vb////////z8/P////////////////x8fH////////////////////////z8/P////z8/P////////////////////////////////////19fX////v7+/x8fH////////////////////39/f////////w8PD////////x8fHz8/P////////////z8/P19fX////19fX////////////y8vL////29vb////x8fH////29vb////////////////////////////////v7+/////////////////x8fH////////19fX19fX////////x8fHw8PD09PT29vb////////w8PD////////y8vLw8PDw8PDy8vL09PTv7+/////////////////////////////////////////////////////////////////4+Pj////v7+/////y8vL///////////////8AAADu7u7u7u7v7+/y8vL19fXz8/P29vb5+fn4+Pj09PT39/f6+vr9/f37+/v8/Pz+/v7v7+////8Ohw90AAAA6nRSTlP+/VG3EfiorVyeTbVdYkysPhdSvl+yobNjU8Fg9qf3NWGjuzuEG0kSq7YfHVjuotZtrpwypftBIryRXlcWnXaNm5P5g7CQ0RpkixNFlHs9vXpW3UoUfk98dPRO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">
</div>
</div>
<canvas class="draw"></canvas>
style.less
#hintImg: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAgCAMAAAAmC6asAAAAMFBMVEX19vf19vft7u/19vfp6uv19vfx8vP19vf19vf19vf19vfm5+j19vcAAAD19vfl5udu+MchAAAADnRSTlOIVcIz10StZneZEewiAMEzGswAAAF/SURBVHja7ZXZbsQwCEXjneXa/P/fFntm0uRpVGkaqVX8YAW4cMCxkq1ftW7STbpJP1sJb0lFPkJiekuq4TMkfkti+gxpe0uivRmB9LQOlHraNixnYErPONAfcYZntYfv9aDtJTmUO5OCeukGR5paqZtbGaSVzYWIlZ9DI6vVpC6shJw5TzdlZk47qZpldAkteBVToxNJrLGqoil6MPE9A1bSNorUXPYWvbLUjbg37lwRNPYW6x6eJK4ilB2hVmChJw2nWx4He3Map1exMVFvQyMVN78rlexbY7Gk0tWUm7gsHUnikQ6dwzLRLM/tRKIlGMMFoijmpthqBocLFTLWO41GnhrFXZIGTiTz5pIyA9G4uqSeSV3W4bSsqvycg0x9RTpcKHaHHybNOZBXfPa41jNjLCeqjRopzgI4kXYcsDqVZWJaZwVWHpYBTOuoACCvEpjTC3DFd6/oVV9YmPw+CWsb+H1SxVWkkgkoV5B6ijasXnMjBPIf/u436e+TvgDCaqPX6lO5yQAAAABJRU5ErkJggg==');
html, body {
background-color: black;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.slides, & > .dg {
display: none;
}
}
#media (min-width: 1000px) {
body {
background-image: #hintImg;
background-repeat: no-repeat;
& > .dg {
display: block;
}
}
}
You need to change the data in the div#first-slide block. The section data:image/png;base64, remains the same, but you need to replace the rest with a Base64-encoded version of your desired image.
To create the Base64 data, you can use one of the various websites that will do this for you - upload your image and you'll get the Base64 text to paste into your code. This is a random one I found with a quick search. I used it to grab a random PNG image, convert to Base64 and replace the text in the Codepen you provided - and it worked.
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
How can I hide the broken image icon?
Example:
I have an image with error src:
<img src="Error.src"/>
The solution must work in all browsers.
There is no way for CSS/HTML to know if the image is broken link, so you are going to have to use JavaScript no matter what
But here is a minimal method for either hiding the image, or replacing the source with a backup.
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
Update
You can apply this logic to multiple images at once by doing something like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">
Update 2
For a CSS option see michalzuber's answer below. You can't hide the entire image, but you change how the broken icon looks.
Despite what people are saying here, you don't need JavaScript at all, you don't even need CSS!
It's actually very doable and simple with HTML only.
You can even show a default image if an image doesn't load. Here's how...
This also works on all browsers, even as far back as IE8 (out of 250,000+ visitors to sites I hosted in September 2015, ZERO people used something worse than IE8, meaning this solution works for literally everything).
Step 1: Reference the image as an object instead of an img. When objects fail they don't show broken icons; they just do nothing. Starting with IE8, you can use object and img tags interchangeably. You can resize and do all the glorious stuff you can with regular images too. Don't be afraid of the object tag; it's just a tag, nothing big and bulky gets loaded and it doesn't slow down anything. You'll just be using the img tag by another name. A speed test shows they are used identically.
Step 2: (Optional, but awesome) Stick a default image inside that object. If the image you want actually loads in the object, the default image won't show. So for example you could show a list of user avatars, and if someone doesn't have an image on the server yet, it could show the placeholder image... no JavaScript or CSS required at all, but you get the features of what takes most people JavaScript.
Here is the code...
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... Yes, it's that simple.
If you want to implement default images with CSS, you can make it even simpler in your HTML like this...
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...and just add the CSS from this answer -> https://stackoverflow.com/a/32928240/3196360
Found a great solution at https://bitsofco.de/styling-broken-images/
img {
position: relative;
}
/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
If you will add alt with text alt="abc" it will show the show corrupt thumbnail, and alt message abc
<img src="pic_trulli.jpg" alt="abc"/>
If you will not add alt it will show the show corrupt thumbnail
<img src="pic_trulli.jpg"/>
If you want to hide the broken one
just add alt="" it will not show corrupt thumbnail and any alt message(without using js)
<img src="pic_trulli.jpg" alt=""/>
If you want to hide the broken one
just add alt="" & onerror="this.style.display='none'" it will not show corrupt thumbnail and any alt message(with js)
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
4th one is a little dangerous(not exactly)
, if you want to add any image in onerror event, it will not display even if Image exist as style.display is like adding. So, use it when you don't require any alternative image to display.
display: 'none'; // in css
If we give it in CSS, then the item will not display(like image, iframe, div like that).
If you want to display image & you want to display totally blank space if error, then you can use, but also be careful this will not take any space. So, you need to keep it in a div may be
Link https://jsfiddle.net/02d9yshw/
I think the easiest way is to hide the broken image icon by the text-indent property.
img {
text-indent: -10000px
}
Obviously it doesn't work if you want to see the "alt" attribute.
in case you like to keep/need the image as a placeholder, you could change the opacity to 0 with an onerror and some CSS to set the image size. This way you will not see the broken link, but the page loads as normal.
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
I liked the answer by Nick and was playing around with this solution. Found a cleaner method. Since ::before/::after pseudos don't work on replaced elements like img and object they will only work if the object data (src) is not loaded. It keeps the HTML more clean and will only add the pseudo if the object fails to load.
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
}
object::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
background: red url("http://placehold.it/200x200");
}
<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>
If you need to still have the image container visible due to it being filled in later on and don't want to bother with showing and hiding it you can stick a 1x1 transparent image inside of the src:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I used this for this exact purpose. I had an image container that was going to have an image loaded into it via Ajax. Because the image was large and took a bit to load, it required setting a background-image in CSS of a Gif loading bar.
However, because the src of the was empty, the broken image icon still appeared in browsers that use it.
Setting the transparent 1x1 Gif fixes this problem simply and effectively with no code additions through CSS or JavaScript.
Using CSS only is tough, but you could use CSS's background-image instead of <img> tags...
Something like this:
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
Here is a working fiddle.
Note: I added the border in the CSS on the fiddle just to demonstrate where the image would be.
The same idea as described by others works in React as follow:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
Use the object tag. Add alternative text between the tags like this:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
You can follow this path as a css solution
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
color: transparent;
}
<img src="gdfgd.jpg">
Since 2005, Mozilla browsers such as Firefox have supported the non-standard :-moz-broken CSS pseudo-class that can accomplish exactly this request:
/* for display purposes so you can see the empty cell */
td { min-width:64px; }
img:-moz-broken { display:none; }
img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */
<table border="1"><tr><td>
<img src="error">
</td><td>
<img src="error" alt="error image">
</td><td>
<img src="error" alt="">
</td><td>
<img src="broken" alt="broken image">
</td><td>
<img src="broken" alt="">
</td><td>
<img src="https://i.stack.imgur.com/Mkdgc.png"
alt="A bird" style="width: 120px">
</td></tr></table>
There are several cells in this example. From left to right:
A broken image without alt attribute (baseline): show a broken image
A broken image with alt text (baseline): show the alt text
A broken image with empty alt text (baseline): show the alt text (nothing)
A broken image with alt text (our CSS): hide the broken image
A broken image with empty alt text (our CSS): show the alt text (nothing)
A functional image with alt text (our CSS): show the image
img::before also works in Firefox 64 (though once upon a time it was img::after so this is not reliable). I can't get either of those to work in Chrome 71.
The most compatible solution would be to specify alt="" and to use the Firefox-specific CSS.
Note that a broken image with an empty alt attribute doesn't guarantee the broken image icon will be suppressed, but that does seem to be the behavior in Firefox 103 and Chromium 103. Also note that this violates accessibility guidelines since screen readers will not be able to describe items with empty alt text and that may be disruptive to blind users' experiences.
Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.
The trick with img::after is a good stuff, but has at least 2 downsides:
not supported by all browsers (e.g. doesn't work on Edge https://codepen.io/dsheiko/pen/VgYErm)
you cannot simply hide the image, you cover it - so not that helpful when you what to show a default image in the case
I do not know an universal solution without JavaScript, but for Firefox only there is a nice one:
img:-moz-broken{
opacity: 0;
}
edit: doesn't actually solve the asked issue, but might still be useful.
This is what I did with SASS/SCSS. I have utility scss file that contains this mixin:
#mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
Its usage in .scss
img {
// ...
#include fallback();
}
You can use before and after as a style to prevent the broken image.
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
In this case, if the image in the src is broken, it will use the before content, and if there is no error it will use the src.
I'm going to build on others' answers. Instead of hiding the tag (which may have important styling), feed it a dummy image:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
Angular way of hiding the broken image.
Inside Html file
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
Inside Ts file
public showImage = true;
In theory:
Strictly "css only", we have no clean options. See other answers, I have nothing to add.
In practice:
I'd say adding a class on error event is the best way to go. Here's what I mean - and there were answers almost like this, the principle is the same, it's just more elegant if you don't add the style declarations directly. Instead, add a class that can be targeted later:
<img src="..." onerror="this.classList.add('notfound')">
And NOW you can style the hell out of it, using img.notfound as selector. You can make it a habit to add this little fragment to all your images; won't hurt anything until you style it.
Side note, before anyone comments "this is not a css-only solution": yes, thank you captain, indeed it's not. I'm trying to help with the problem itself, a problem many may have, instead of just looking at the exact wording.
This is an old question but here is something that works, the main trick here is never set a fixed height and width on the image i only use percentage.
.example {
background-color: #e7e7e7;
padding: 25px;
}
.image-box {
height: 50px;
width: 50px;
border-radius: 8px;
background-color: rgb(241, 255, 255);
color: rgb(241, 245, 249);
overflow: hidden;
display: block;
position: relative;
}
.image {
display: block;
max-width: 100%;
height: 100%;
object-fit: cover;
}
<div class="example">
<span class="image-box">
<img class="image" src="/broken.jpeg" alt>
</span>
</div>
Hide image alt with this
img {
color: transparent;
}
A basic and very simple way of doing this without any code required would be to just provide an empty alt statement. The browser will then return the image as blank. It would look just like if the image isn't there.
Example:
<img class="img_gal" alt="" src="awesome.jpg">
Try it out to see! ;)
For future googlers, in 2016 there is a browser safe pure CSS way of hiding empty images using the attribute selector:
img[src="Error.src"] {
display: none;
}
Edit: I'm back - for future googlers, in 2019 there is a way to style the actual alt text and alt text image in the Shadow Dom, but it only works in developer tools. So you can't use it. Sorry. It would be so nice.
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
Is it possible with CSS/HTML to resize some box to match exactly it's background image size? Without using javascript.
For instance let's say I have a simplest div:
<div class="image">TEST</div>
.image {
background-image: url(http://placehold.it/350x150);
width: 350px;
height: 150px;
}
And I would like to resize it to those 350x150 dimensions without hardcoding those values. Also I cannot put any content inside this div.
http://jsfiddle.net/5Dane/
EDIT: I see a lot of answers I already was aware of, thank you for them, but that's not the solution here unfortunately. Below I'm explaining why I need such functionality.
What I'm trying to do is a form with steps (buttons previous and next). In session I hold all the values the user has input but there are some buttons which will add more functionality for the user (like multiple dynamically added rows for data). I'm doing it with jQuery of course, but I want the form to be able to work when there is no java script enabled.
Now to the point - I was trying to find out how to tell the difference which button the user has clicked. The case is all my submit buttons need to be images and the simplest solution <input type="image"/> doesn't send info about the button clicked with POST data. That's why I came to this solution:
<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />
/* Submit button with image */
input.submit_img {
font-size: 1em;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
border: solid 0px #000000;
cursor: pointer;
}
http://jsfiddle.net/XRvqV/
This way my form will submit all the data AND I will know which button the user clicked. Also the button looks fine, like it should look. I was wondering though if it was possible to make it a little more portable - my buttons all have different widths for different functions. Can someone suggest another approach here?
No, you can't. CSS is not aware of the the image size. You can do it easily with JQuery.
JQuery exmaple
$(function(){
var bg = $("div.image").css('background-image');
bg = bg.replace('url(','').replace(')','');
var newImg = new Image();
newImg.src = bg;
$("div.image").css("width",newImg.width);
$("div.image").css("height",newImg.height);
});
This is a hack and doesn't use background-image (uses an img tag instead), but is the only way I can think of without using JS.
HTML
<div class="container">
<div class="image">
<img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
</div>
<div class="content">
some text
<br/>
some more text
<br/><br/><br/><br/>
text text text
</div>
</div>
CSS
.container {
position: relative;
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
}
Basically, you allow an img tag to determine the height and width of a container. Then, overlay whatever content you want on top of the image (I'm assuming you want to put something on top).
jsFiddle
i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.
<div class="img-responsive">
<img src="test.jpg" width='xxx' height='yyy' alt='test'>
</div>
You can't do that using just HTML. But you can do this using HTML!
You should try this:
background-size: values;
This way, you will resize the background-image to the size of the container!
You can't do it directly.
The only solution it would be fetching the BG of the DIV element and attach new DOM img element to the DOM node, afterwards you could use the info of the image to add the proper with and height..
if you are willing to use jquery you can do this.
$(function(){
$('.image').each(function(index,element){
var _t = $(this);
_t.data("LinkedImg","LinkedImage"+index);
$('body').append(
$('<img />',{
id:"LinkedImage"+index,
src:_t.css('background-image')
}).hide());
});
$('document').on('load',function(){
$('.image').each(function(index,element){
var _t = $(this);
var _tmp_img = $('#'+ _t.data("LinkedImg"));
_t.css({
width:_tmp_img.width(),
height: _tmp_img.height()
});
});
});
})
Can anybody advise me on this? WebKit browsers keeps on putting a gray 1px border around disabled images. The reason I need this removed is for email optimization for when email clients have images disabled. Works fine in Firefox, but WebKit browsers keep showing the border.
I have tried border:none !important everywhere including inline, but Chrome/Safari are being stubborn.
Edit: Here is sample html with inline css
<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />
Amit's answer is just great, but a small advice:
use visibility: hidden; instead of display: none;
img:not([src]) {
visibility: hidden;
}
so you could save img block size and positioning of other elements. its usefull in most cases, i use it on my sites with images lazyload and show just blank block before the image loads.
If img src is not present or broken then use below css code
img:not([src]){ display:none; }
this css hide image till img src is not loaded completely.
There is no way to remove it but I wrapped the image in an element that has overflow hidden property in its styles.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hide Broken Image border</title>
<style>
body{
background-color:azure;
}
.image-container{
width:100px;
height:100px;
overflow:hidden;
display:block;
background-color:orange; /*not necessary, just to show the image box, can be added to img*/
}
.image-container img{
margin:-1px;
}
</style>
</head>
<body>
<span class="image-container">
<img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
</span>
</body>
</html>
Take a look at this bin
http://jsbin.com/OpAyAZa/1/edit
Browsers don't seem to really give you a way to remove that border. Your simplest solution is to change your img to a div and apply the image as a background.
That way, if there's no src, you won't get the broken image icon and border.
Update: Microsoft Outlook makes things difficult, and the cure is almost worse than the disease: vector markup language, shape elements, imagedata elements, etc. If you google around you'll see how to use them http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/
Outlook users might just have to go without the image so that you can call it a day.
Try using some JavaScript to remove the broken image. Thats the only way
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function () {
self.parentNode.removeChild(self);
}
}
Because rendering of broken image varies from browser to browser and it could not be altered.
P.S: onerror will fire when the image is not loaded
You can try this code to remove borders around broken images in webkit.
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function () {
self.parentNode.removeChild(self);
}
}