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>
Related
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.
body {
margin:0px;
padding:0;
background: #777 url(foodwine.png) center fixed;
background-repeat:no-repeat;
text-align:center;
}
I can't seem to get this background image to show up on IE7 (I'm not sure about other IEs).
I've tried all different kinds of variations and spacings but it just doesn't want to show up in IE.
Any help would be much appreciated!
Edit: I'm using rails to serve the image and it works in firefox/chrome. I tried specifying the directory with '/images/foodwine.png' but now it doesn't show up on any browser.
http://afternoon-samurai-9254.herokuapp.com/ This is the page I'm working on.
Try this:
body {
margin:0;
padding:0;
background: #777 url(foodwine.png) no-repeat center fixed;
text-align:center;
}
I'm guessing that the image is in a directory called images or something similar? If so, calling it from your root web directory is the safest way to make sure it is referenced properly:
background: #777 url('/images/foodwine.png') center fixed;
Try to use margin:0, instead of 0px.
As Cole said add quotes around the image url. I suppose the image exists 'cause you are pointing out explorer, so i think you tried other browsers.
You need to have strict doctype for fixed positioning to work on IE7.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It seems that ie7 have a weird behavior (bug?) rendering heavy images (2.3MB in this case), try using jpg image format instead, a png is normally used to support transparency which I dont see it in this case.
Why the following example shows the image in Firefox 4, but not in Chrome 10 and Internet Explorer 8?
HTML:
<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>
CSS:
div {
width: 60px;
height: 60px;
border: 1px solid black;
}
Any ideas for workarounds?
As c-smile mentioned: Just need to remove the apostrophes in the url():
<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>
Demo here
u must specify the width and height also
<section class="bg-solid-light slideContainer strut-slide-0" style="background-image: url(https://accounts.icharts.net/stage/icharts-images/chartbook-images/Chart1457601371484.png); background-repeat: no-repeat;width: 100%;height: 100%;" >
Chrome 11 spits out the following in its debugger:
[Error] GET http://www.mypicx.com/images/logo.jpg undefined (undefined)
It looks like that hosting service is using some funky dynamic system that is preventing these browsers from fetching it correctly. (Instead it tries to fetch the default base image, which is problematically a jpeg.) Could you just upload another copy of the image elsewhere? I would expect it to be the easiest solution by a long mile.
Edit: See what happens in Chrome when you place the image using normal <img> tags ;)
it is working in my google chrome browser version 11.0.696.60
I created a simple page with no other items just basic tags and no separate CSS file and got an image
this is what i setup:
<div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>
I put an id just in case there was a hidden id tag and it works
I would like to add (in case someone came here looking for it) that it's not possible for url() to point a local image if you are trying to send an styled email. You have to deploy that image somewhere else.
Hi guys I have a problem of images showing background-color on IE6 and its supposed to be a transparent background. on all the other browsers it is showing fine except for IE6.
can anyone please tell me what am i doing wrong. tried the opacity to 0 but its still showing the background-color.
The fix is quite simple. No need to include any JavaScript. Define your css like this and include your image name in filter.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
IE6 doesn't support semi-transparent PNGs. Try something like this for a work-around if you really need to:
http://css-tricks.com/snippets/css/png-hack-for-ie-6/
or http://www.jay-han.com/2008/10/15/unit-png-fix-best-ie-png-hack/
Or just drop IE6, it's way behind all other browsers, and fast losing market.
IE6 doesn't support transparent PNGs properly.
This page has a fix which involves a behaviour file. Alternatively you could use GIFs.
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.