two background images in IE - html

how can i use 2 image for the body the first background will be at the top with no repeat , the second image will be after the first one with repeat , in Firefox i can do that easily but my problem in IE

Attach one to html and another to body -
html{
background: url() repeat-y left top;
}
body{
background: url() no-repeat left top;
}

It's possible to add multiple backgrounds in IE using a proprietary filter
As taken from the linked site, the IE code is as follows:
<!--[if gt IE 7]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
zoom: 1;
}
/* Now lets make it IE8 Multi-background images */
#multipleBackgroundImages {
background-image: url(../images/lilys.jpg);
background-position: bottom right;
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')";
border: 1px solid black;
padding: 0 1em;
}
/* Fix for IE clearType */
#multipleBackgroundImages p {
position: relative; /* required to re-enable IE's clearType */
}
</style>
<![endif]-->

Use the below code. This supports all browsers including IE
body{
width:800px; height:750px;
background: url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg), url(http://www.google.com/logos/2012/india12-hp.jpg);
background-position:top, bottom;
background-repeat:no-repeat, no-repeat
}​
You can get the detailed explanation here

use nested div's and apply one background for one and another for another
<div class="background-bottom"><div class="background-top"></div></div>

Its Simple you have to split the body into two seperate div's in that you can do that easily. top div and bottom div must have those two images as their background.
It may work in IE

Related

Why background-image doesn't work in IE9?

This is the website:
http://loveloverun.com/test/love_run/
I checked and it works properly in chrome and firefox. The problem is that in IE9 the background image only works on the body level.
Here is my css:
body {
font-family : Open Sans;
min-height: 0px;
background: url("../img/front/bg.png") repeat;
height:auto;
}
And the other div e.g. container
.container {
width: 1022px !important; /*1302px*/
background-color:#ffffff;
background-clip:content-box;
}
and one more example (footer):
#enquiry {
color:#ffffff;
background: url("../img/front/black.png") repeat;
}
I checked the doc type and it's not missing any tag.
And also some other places are different from the chrome / firefox one, so I wonder:
1) Are there any plugin to enhance the compatibility? I tried modernizer, but it seems to have no effect.
2) How can background problem be solved for IE9?
Update:
body {
font-family : Open Sans;
min-height: 0px;
background-image: url("../img/front/bg.png");
background-repeat: repeat;
height:auto;
}
still the same result
Update 2:
Screen cap in ie9
Use
background-image: url(/image.whatever);
instead of the
background: url (); code

Strange behaviour with border-image CSS

I have an image that I would like to use as div's border and background. The below code (and fiddle) produces undesirable white background inside the div despite using background: transparent !important; or background: none !important; (I tried both).
Here's the image I'm using:
Here's the effect I'm getting:
Here's the effect I want:
Strangely, I can achieve the desired effect by opening Web Inspector in Chrome and toggling the border-image property after page render. Simply turning the border-image off and back on, I get the result I want:
HTML
<div>test</div>
CSS
div {
-webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round;
}
So if the browser can render it, why can't I write it? :) Any help/suggestions would be great.
Please note I have already tried setting the image to be the div's background-image instead of border-image and that did not produce desired results either (scaling the image to prevent the border from getting cut off was simply too much guess work since the textual contents of the div are dynamic).
You're lacking the fill keyword: the standard says:
The ‘fill’ keyword, if present, causes the middle part of the
border-image to be preserved. (By default it is discarded, i.e.,
treated as empty.)
See updated fiddle: writing 30 30 fill seems to solve your issue.
JSFiddle - Click Here
Maybe this will help you. Just shooting in the dark.
#block {
background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png");
height: 100%;
width: 450px;
background-repeat: no-repeat;
}
#block .blocktext {
padding: 50px;
}
Does something like this work for you? http://jsfiddle.net/qazLuyxh/9/
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 40px;
width: 520px;
height: 320px;
background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat;
color: #FFB9B9;
font: bold 24px/41px'fontname', Helvetica, sans-serif !important;
background-size: 100%;
}

Prevent IE8 from making content transparent

I have a div with its individual CSS for IE8, it is transparent. How can I prevent IE8 from making content inside this div also transparent? It should be 100% visible and not transparent. Thanks so much for suggestions.
Fiddle (to be watched at in IE8)
.mybox {
position: absolute;
top: 362px;
left: 0;
width: 460px;
height:94px;
overflow: hidden;
text-align: left;
padding-left: 10px;
padding-top: 3px;
overflow:hidden;
background-color:#000000;
/* background: transparent; */
-ms-filter: "alpha(opacity=60)";
/* zoom:1 ; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; */
/*filter: alpha(opacity=60);*/
}
OT: Ok I know this is kind of old school. But still my customer wants this page to be compatible with IE8.
Related resources:
2
3
4
Opacity in inherited to all children, by design. New browsers can use alpha-channel (RGBA) to get around this, IE8 cannot.
All you can really do is use absolute-positioning to place the content you want visible over-top of the transparent bits. You of course need to rearrange the element stacking order to do this.
You can cheat by making a copy of the contents, minus the transparent element, and placing it over top of the existing element using JS.
If the div has the class called .mybox then try and definitively set the opacity perhaps by adding opacity: 1;
Finally, I found an even better solution:
.mybox {
background:none transparent scroll repeat 0 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#98000000,endColorStr=#98000000);
}
UPDATED: Take a look with IE8
I obviously messed up something with the filter declaration, I am sorry about that... :(

Negative margin-bottom in IE9+ allows scrolling too far

Let's consider this fiddle (putting it on JSBin so it works in IE8):
http://jsbin.com/EpuboseG/1/edit
HTML:
<div id="outer">
<div id="inner">
<div id="notVisible">
I am not visible in all browsers (this is what I want)
</div>
1<br>2<br>3<br>4<br>5<br>
6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>
16<br>17<br>18<br>19<br>20<br>
</div>
</div>
CSS:
#outer {
overflow-y: scroll;
height: 150px; /*smaller than contents */
background-color: yellow;
width: 400px;
}
#inner {
position: relative;
top: -30px;
margin-bottom: -30px;
background-color:red;
}
#notVisible {
height: 30px; /* due to "top" in #inner I am invisible */
background-color: lime;
}
I have a negative margin-bottom in #inner which is compensated by the same negative top both of 30px. The result in all browsers is that the top 30px of #inner are invisible which is good.
Why I do have margin-bottom:-30px; top:-30px? In order to hide the top 30px of the inner div, and shift everything else up (as if the top 30px of the inner div never existed).
However the issue is that when I use the scrollbar, in IE9+ (IE9,IE10,IE11) I can scroll too far - at the bottom I can see a 30px empty yellow thing. This is not the case in IE8, Firefox, Chrome, Safari, Opera.
Basically any negative margin-bottom provokes this kind of behavior for me.
Is there any workaround for that?
Edit:
It seems that when I remove margin-bottom: -30px; but keep top: -30px, then the roles are switching, i.e. I see yellow background everywhere except IE9+.
You could have conditional statements for IE9, 10 and 11:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> // For IE10+
<style>
//rest of the styles
</style>
<!--[if IE]>
<style> //IE9+ specific styles here
</style>
<![endif]-->
<!--[if lte IE 8]>
<style> //IE8 and under specific styles here.
</style>
<![endif]-->
It'd add a few more lines of code, but it works. The meta forces IE10+ to adopt IE9 behaviour, since IE10+ doesn't support if statements anymore. The first if statement targets IE in general, and the second specifically targets IE8 and below. If the browser is IE9+, it'll ignore the second statement and use the styles from the first statement. If the browser is IE8-, it'll use the styles in the second statement. All other browsers ignore the if statements and use the original CSS.

Weird gaps showing up under header when loaded in IE 9

I've been scratching my head looking for a solution to this "common gap problem".
Here's what the page's like in Chrome & how the page is like in IE9 https://dl.dropbox.com/u/3788693/Work/example.jpg
Here's my HTML file: https://dl.dropbox.com/u/3788693/Work/01index.html
I've read lots about using and applying
Setting position:relative on the header block.
Setting position:absolute; top:0; right:0
#header img { display: block }
But it just doesn't seem to show any change in IE. Perhaps i'm applying the wrong things in the wrong place? Anyhow, why is it different in IE in the first place?
In your conditional comment for IE you're using
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
Removing padding-top: 30px from .twoColElsLtHdr #sidebar1 and padding-top: 15px from .twoColElsLtHdr #sidebar1 will take care of the gap you're seeing.