I've got a big issue concerning the background of my header.
I've been tweaking the site for a few hours in IE, since the page is perfect in every other browser, however old they may be. But i'm totally losing my mind on IE 8, since my header-background (a .gif) simply won't repeat itself ONLY horizontally.
As said before, it's great in every other browser, even IE6,7 and 9, but in IE 8 the background just pastes itself over the whole site.
the css:
header{
position:relative;
height:615px;
background:url(/images/1paage-header-bg.jpg) repeat-x center top;
width:100%;
min-width:950px; }
I'd appreciate a little help here...
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ImagePath',sizingMethod='scale');
background-repeat: repeat-x;
It's working in Internet Explorer 6.
Seeing how you've structured your site would definitely help.
But, often what is used for horizontally repeating header background is body.
http://jsfiddle.net/KMQJd/
Little clarification: Usually body is used if you are already using some sort of background image in html ( which i kinda asumed here.. ) But if you just have a background color and you want to use repeating image at top you should use html - html { background: #777777 url(image.jpg) repeat-x top left; }
I wonder if its the order of your position as first should come vertical and then horizontal.
background: url(image.jpg) repeat-x top center;
I have had the same problem, just check the syntax in IE8 every space is important, also check in firebug if the image loads? My bad syntax was:
background: #fff url(../img/bg_02.png)repeat-x top center;
correct one:
background: #fff url(../img/bg_02.png) repeat-x top center;
in my case the space was the problem. the top and center parameters are obsolete.
Repeat x does not work in IE 8. There no other alternative though
http://reference.sitepoint.com/css/background-repeat
Try setting background-repeat to repeat-x like this:
background-repeat:repeat-x;
Related
First of all, I'm a total beginner and I'm trying to do things way above my league I think.
So here's my problem: I'm actually making a horizontal scrolling website using pure CSS with some parallax into it.
While I've managed to make some things work. The parallax effect is getting me crazy.
On the second slide of my template, I'm not able to make my background stick to the top inside my div, it scrolls down for w/e the reason. Also, I've made a text on top of it with a background-clip, while it works on Chrome, it doesn't on Firefox...
If you guys got a solution, I'm up for it.
Here's the website: http://triztwtv.free.fr/portfolio/
Also, I'm doing this in pure CSS but if you got a good JS framework to make my dreams come true, I'm up for it as well.
I'm not sure if its exactly what you wanted to do but I tried fixing it.
First I removed these lines:
background-attachment:fixed;
background-position-x:100vh;
from your code and updated this part of your CSS like this:
.two {
order: 2;
margin-top: 30vh;
}
.bkg1{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.ibb.co/D54n4T5/1.png");
}
Centre the text in the window the same as you did in .one, for the first screen, by setting the margin-top, so it doesn't stick to the top. I tested in in Firefox, and it looks like it works as you wanted.
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
In my CSS I am placing a background like so,
background:url(/media/images/body-background.png) bottom left repeat-x;
The is a gradient that runs from white to grey, and I am wanting it start at the bottom of my <body> and repeat across the screen, however in IE it seems to sit no where near the bottom of my body, is there any reason for this?
URL - http://apigroup.factoryagency.co.uk
Sico87Just because you are dealing with IE I would avoid doing short hand css, I haven't used it too much but in the past this was an issue with IE. Also, while looking at your site I notice you are giving the body a height of 100%, this might be unnecessary, remove the body height Then try this:
body {
background-image: url("/media/images/body-background.png");
background-position: left bottom;
background-repeat: repeat-x;
font-family: Arial,Helvetica,Tahoma,sans-serif;
}
I hope this helps.
By the way, nice job with the site design ;)
You could try changing the order of the values like this:
background:url(/media/images/body-background.png) repeat-x left bottom;
It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody??
Example for the css code :
tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }
The HTML is basic - A multi cell table.
The goal is to have different colors fade into every row, but it could be any non-pattern image.
Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/
Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.
Add float:left to the row, that should fix it.
tr {float:left;}
Tested in Chrome 54 on Windows 10:
tr {
background-attachment: fixed;
}
Though it seems it's not without bugs - the background image only repeats throughout the viewport at loadtime, which means that the cells that appear when you scroll down doesn't have the background.
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
IE Blog:
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
Here's an example of what I mean.
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
Any solution that doesn't involve images would be greatly appreciated.
There's no good solution to this problem.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, etc.) pass right trough it - a click on such an element also triggers a seperate click on whichever element that happens to be positions behind it. Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
Here are a few ideas off the top of my mind - in order of my personal preference:
Just fall-back to a plain solid background-color in IE and move on with your life. (Be sure to place that background rule first for it to be safely overridden/ignored by FF and Webkit.)
Use a background-image in IE. (Again place that CSS rule at first)
Keep using the gradient hack and simply 'suck it up' and accept the jaggy text for IE.
use Javascript (or IE's proprietary CSS expression() syntax) to inject an empty element, apply the gradient to it and place it behind the text.
div {
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
behaviour: expression( jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */
position: relative;
}
div div.ie-wrap {
position: relative;
}
div div.ie-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: expression( this.runtimeStyle.height=this.parentNode.clientHeight+"px" );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
(Warning: above code is untested pile of crap. and will probably not work as is.)
Keep using the gradient hack and use Cufon to replace the jaggy text with VML rendered text. (Rests on the assumption that your site is using a typeface that allows font-embedding.)
You could try using an IE css 3 html component, like PIE (http://css3pie.com,) which does a fairly decent job of rendering gradients. (Though this is essentially using javascript)
Wrap the content with a DIV then add this to the DIV's css style...
position: relative;
http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html
I had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.
The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.
I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:
background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;
(the hack could be improved, but it works for me, including IE9)
I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...
Lets assume:
<html>
<head>
<title>IE8 filter problem causing jagged fonts</title>
<style>
html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued {
position: relative;
}
.gradient {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6');
}
</style>
</head>
<body>
<div class="gradient">
<div>I am wrapped, therefore not jagged</div>
</div>
</body>
</html>
Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.
Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/
This may not count as elegant (or working) solution, but how about using Cufón for IE?
Yes, that's a problem with IEx.
Try using a solid background color:
/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc
Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.
Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.