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.
Related
This page renders correctly in every other common browser except Safari. (Yes, it's a mess, I haven't finished the site yet) Safari quickly displays certain elements, then replaces them with white. In particular background images (or colors) in the body tag and , also text in a paragraph tag.
http://sr.hi-speedinter.net/staging/
Yet similar code works on the homepage http://sr.hi-speedinter.net where the body background image displays correctly.
I'm baffled! I've searched for about 2 hours and tried lots of tweaks but nothing has had any effect.
Here's some of the CSS
body.src-sub-page {
background: url("http://sr.hi-speedinter.net/wp-content/themes/twentyfourteen-child/images/sub_page_bg_tile.jpg");
background-color: #edeff3;
background-position: top;
background-repeat: repeat-x;
}
.src-sub-page .site-main {
background-image: url("http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png");
background-position: top center;
background-repeat: no-repeat;
}
Any ideas where I'm going wrong?
Did you search for Safari bugs? And what happens if you disbale the rest of the CSS?
Is JPG and PNG not working?
Did you try background instead of background-color?
Did you try it on another PC?
Also try to change these
http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png"
to
wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png
Thanks Gintoki, I had actually tried most of those, but the real problem turned out to be Safari for PC. I found someone nearby with Safari on a MAC and the page worked perfectly.
But for anyone else having similar issues, I highly recommend trying those steps above. Good to have it in one list!
I'm a very newbie to CSS/HTML and I can't seem to fix an issue I have.
This is the website I'm developing http://sahsahashas.tk
Now, when I preview website over Dreamweaver in chrome this is how navigation bar looks (the way its supposed to)
http://i.imgur.com/4dw1j6K.jpg (it is actually a picture, not a background color :)).
I know it looks almost the same but it really annoys me. Also, I know my CSS code is a mess but again, I'm a newbie.
.navbar {
width: 708px;
height: 61px;
margin: auto;
background: url(navbarr.jpg);
font: normal normal 700 1em/4em Arial,sans-serif;
z-index: 2;
}
You have a typo: background: url(navbarr.jpg); should be navbar.jpg or your image navbarr.jpg doesn't exist on the server. There is an image called navbar.jpg. Hope this helps.
Look at css in my firebug: http://i.imgur.com/Vdi0hfZ.png
to specify the image as background you should not use only background,
I will suggest you to specify the background-image attribute and image name with valid path should in single(or double) quoted..
background-image: url('navbarr.jpg');
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>
Example website
So when you mouseover the projects you should see an rgba background fade in with some text over the existing image. I cannot duplicate the error in Safari or in Firefox. In fact, I cannot duplicate this for the same ones every time, and I can also say that refreshing the page will not necessarily fix the problem either.
Is this a problem in my code or have we come upon a problem with Webkit and/or Chrome specifically?
UPDATE 1
Originally I thought this was a problem with the RGBA background so I tried using a background: black; to see if it changed anything. This didn't work seeing as the line was still present on mouseover.
UPDATE 2
I have considered this to be a problem due to the display I've been using. I'm on the new Macbook Pro with retina display. This could still be the source of the issue, but I'm not convinced it is. I'm yet to do testing myself on another device that isn't a retina display, but I've been told that the lines are still prevalent.
This image will help:
There's something about your box-model that I don't like for this technique. I've used similar hover/fade scripts, but never utilized a negative margin (because it will jack up the box-model), or made the top layer larger than the bottom.
I found a few things that helped it render better for me (I'm wasn't seeing lines, but I was seeing either rounded white corners peaking out or black chisel points in the parent corners). At any rate, here's the few things:
Nix the -1% 0 0 -1% margin (making something 102% wide, then using a -1% margin seems like 100% to me, but relies on all browsers rendering that math the same).
Set the parent and child to be the same W x H (200px x 410px)
Decreasing the radius of the child by one px hid the oddities of the corners for me (again, I think it's a rendering engine thing FWIW); though not having it set should do the job.
I also add .projectItem a:hover to the .projectItem a's CSS declaration, to allow just the transitions to occur on .projectItem a:hover.
This fiddle does the roll-over effect with all the features above added/removed respectively: http://jsfiddle.net/hd4QM/
HTH.
I can't reproduce le problem in Chrome, but from your screenshot it looks like you are zoomed in. Sometimes browsers round off percentages and you might be ending up with a missing pixel, it's best to make it stick to each edge instead of specifying height and width:
.projectItem {
overflow: hidden;
}
.projectItem a {
display: block;
position: absolute;
opacity: 0;
width: 102%;
height: 102%;
background: black;
color: #F6F8EE;
background: rgba(0, 0, 0, 0.85);
border-radius: 5px;
margin: -1% 0 0 -1%;
}
Also, I'm not sure why you're displaying as table, but this might be compounding the problem. Change it to block.
I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too.
I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.
Is there good cross browser solution for this?
You could use a good old fashioned img tag, without height and width attributes. In your CSS, position it absolutely with a low z-index, set height and width to "100%".
Put everything else on the page in another div with a higher z-index
Like this:
<style type="text/css">
#stretchy {
postion: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
#everything_else {
position: relative;
top: 0;
left: 0;
z-index: 10;
}
</style>
...
<img src="/images/myimage.jpg" id="stretchy" />
<div id="everything_else">
...
</div>
See http://axoplasm.com/lost.html for an example.
It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.
I don't want to hijack this question, but if you had this code:
background-image: url('images/background.gif');
background-size: 100%;
This repeats the image in all current browsers (IE, FF, GC, SF, OP) which while unsavory works across all the browsers, unlike the z-index depth method (I have a complex foreground).
However if a browser was to suddenly get bg-size CSS3 support, does the CSS3 spec say what should happen? Should it stretch the image or do what it always did and repeat?
It is not possible in CSS1 or CSS2, however it is possible in CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/
However this is not available to IE6.
An alternative would be using background-repeat, or this site has something that might work (I havent checked if it works): webdesign.about.com/od/css3/f/blfaqbgsize.htm
I know what you mean about users not upgrading browsers, but at what point do you stop coding for IE5, or even IE4?
Good luck,
Matt
A good alternative would be to use a "static image" that fades out to a pattern or solid color. That way you still get your background image (however big you want it) and scalability.
In CSS3, you can use background-size: 100%;
Firefox 3.5 supports some CSS3 properties, but I don't believe they support EVERYTHING yet... (I think).