I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
I am having a weird problem with ie8 and lower. I apply a backgound image and color to the body element with CSS. The background is, however, painted white in IE8 and lower when I load the page.
In the moment i resize a little bit the window the background is correctly applied.
body {
background-image: url(../images/main.gif);
background-repeat: repeat-x;
background-position: top left;
background-color: #6e9b68;
}
A live site suffering this problem.
Any idea how to solve this issue?
It's a bug in the version of jQuery you're using (v1.6.1).
I came across the same problem in this question, it has all the info you need: Weird IE8 layout glitch - why does the body background disappear?
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;
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".
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.