In my website i wanted to provide 'copy protection' for images by defining them as backgrounds. Its working perfectly on Chrome, Safari and FF. But on IE the background images are not showing. You can check out the site www.kettik.com.
The approach i followed was something like this. Since the images are from the DB, i cannot define the background properties inside the css class and have to use the 'style' attribute to define it.
<div class="contentItemCover" style="clear:both;">
<img src="/images/sitegfx/spacer.gif", style = "background: url('xyz') no-repeat;">
</div>
.contentItemCover img {
width: 600px;
height: 290px;
padding: 0px !important;
}
Is there any way to work around this issue in IE ? Any help on this would be highly appreciated.
<img src="/images/sitegfx/spacer.gif", style = "background: url('xyz') no-repeat;">
Have you tried removing that comma?
I would just like to say that this "method" of protecting images has a few flaws.
You could easily right-click it and say "save background image..." (in IE) and in FF you can "view background image" and then save it anyway. or, you could simply screenshot it. I would advise watermarking images.
Related
I'm currently tuning a file input for displaying its content using a preview <img> tag.
<div id="image_preview">
<input> .....
<img id="preview" src="" class="img-fluid" alt="">
</div>
Using some CSS, it renders correctly on Chrome but I got a black stroke on every side of the square on Firefox (and only on Firefox). I tried to set a "border: none;" or even a transparent background but none of these are working as expected. Any hints?
Thanks for any kind of help :)
Fixed. I found that Firefox is adding these lines only on blank img src. I added a blank image base64 string and it's working fine now.
Thanks for your help :)
If needed : data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
Firefox usually adds a dotted line, this can be removed and an SO user answered this question:
How to remove Firefox's dotted outline on BUTTONS as well as links?
Basically writing in your CSS this ::-moz-focus-inner
.img-fluid::-moz-focus-inner {
border: 0;
}
I hope this solves your problem.
I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
because a png image that I put in the header of my website on all browsers display correctly on Internet Explorer and 10 displays a square around it? I'm going crazy trying to figure out why. Can anyone help me? The image has no background, is transparent. I attach a screenshot for you to understand the problem better.
The blue part is the logo (which I covered)
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" style="border-style: none"/>
</a>
An even cleaner solution, if you never want the blue border, is to say so in a style sheet:
img
{
border-style: none;
}
And then reference that style sheet in the head element of your page:one
or
img
{
border: 0 none;
}
To get rid of the blue border you can use the border attribute for the img element like so:
You need to set the Border to 0 or None:
There are two ways to delete the Border using CSS or Direct way
Direct implementation is
<img src="image path" alt="" border="none">
Using CSS :
<style type="text/css">
a img {border:none;}
</style>
HTML
<img src="image path" alt="">
It's IE10 issue. Give it a style and remove the border.
<img src="/YourImage.png" style="border-style:none;">
Same issue here
People say that this is an issue of IE, but its actually not exactly an issue,
its just their browsers default CSS rule which in a lot of cases is overridden.
Basically if you are making a page that is compatible with a lot of browsers, specially if
IE is included in that case its wise to use Reset.css, which reduces the browser inconsistencies and which allows you to specify your own rules from scratch.
I know you got your answer, but I would recommend this approach.
I have 8 html div's. I have set background of all divs with different image, All are displaying properly except 2 div's in IE8 and in default android browser. If i set any other image for these two div's background, they will also work. But if rename those two images and set them, they wont work. I am confused. Below is the code
#tabs-8{
background: url(../images/banner/290/open-house.jpg);
}
#tabs-6 {
background: url(../images/banner/290/our-trainers.jpg);
}
Is there any issue with those images Or Is this the issue in IE8.
Using shorthand property for background might cause the problem. So just use background-image: url('path'); if you don't specify any other values.
If you use shorthand property, use like this at least:
background: url('path') no-repeat;
I found this problem :) Your images doesn't load on IE8. If you enter this link http://115.115.80.139/images/banner/290/our-trainers.jpg on address bar in IE8 you don't see image. I think that problem on server or image. Try resave image with another name or upload it on other hosting
Yes You need to call the image using background-image: url Property.
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class