first time posting - I hope somebody can help.
I have a gradient background on a page which uses ajax (and becomes quite long after the call).
In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.
Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?
Here is my css relating to the gradient:
html {
background-color: #8c827a;
height: 100%;
margin: 0 0 1px;
padding: 15px;
/* Mozilla: */
background: -moz-linear-gradient(top, #8c827a, #2B2825);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8c827a), to(#2B2825));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}
To make other browsers behave the same as Internet Explorer, you can make the background fixed:
html {
background-attachment: fixed
}
Make sure you place background-attachment after the two background declarations.
Add this CSS:
background-attachment: fixed;
This property "pins" the background at the browser viewport.
Related
When playing with striped gradients made with CSS, I found a strange behavior of IE, where the stripes became invisible after reducing the height value in the background-size property.
This behavior only in IE: Chrome and Firefox work as expected.
Here's the code :
The HTML
<body>
<div class="stripes all"> </div>
<div class="stripes no_ie"> </div>
</body>
The CSS
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
}
.all {
background-size: 100% 98px; /* Will show stripes in IE */
}
.no_ie {
background-size: 100% 97px; /* Will not show anything in IE */
}
Here's the demo:
http://jsbin.com/jipehipobele/1/edit
Could someone explain to me why this happens and how to circumvent it, if possible?
My workaround to this problem now is changing the tabstops of the gradient a little bit:
background-image: linear-gradient(red 1px, transparent 1.1px);
This works in IE and does not change the background-size. Thank you anyway, Taruckus for helping me find this workaround.
Pretty weird issue. I found that it has to do with the browser scaling; if you zoom in at all using your browser / IE, the stripes will show. the zoom property is an old IE dog, so giving it a minimal value is hopefully an appropriate workaround.
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
zoom:1.05;
}
more on zoom http://css-tricks.com/almanac/properties/z/zoom/
I have this property with multiple background images and their respective positions:
#my_div {
background-image:url("..."), url("..."), url("...");
background-position:right bottom, right bottom, right 15px top 17px;
}
The positioning for the third image works fine on FF, IE10, Chrome.. but unfortunately not on Safari Mobile. It renders the right and top thing but not the offsets (15px for right and 17px for top).. I couldn't find any reference on this. How would you deal with this? I'd avoid having to modify the image manually adding transparent borders to make the offset.
Mobile Safari (as well as the Android browser) doesn't support the four-value syntax yet. (see the MDN article on background-position).
One possible workaround would be to extract the background image which should have the offset and put it in a pseudo element that has the corresponding offsets.
#my_div:before{
content: '';
display: block;
position: absolute;
z-index: -1;
height: 50px; /* Height of your image / parent div */
width: 50px; /* Width of your image / parent div */
/* Your offset */
top: 17px;
right: 15px;
background-image: url("...");
background-position: right top;
}
For easier understanding I created a jsFiddle: http://jsfiddle.net/pKWvp/1/
You could also try using the css calc function: http://briantree.se/quick-tip-02-use-css-calc-properly-position-background-images/
It's might be easier/cleaner than using pseudo elements.
I have this CSS:
.add-to-cart .button {
background: url("pic.gif") no-repeat scroll left top transparent !important;
height:37px !important;
width:171px;
}
This should set the pic.gif image for a button with class button inside a div with class add-to-cart no matter what was done before. This works in Chrome, FF and Opera, but not in IE9. Any ideas whats wrong with that one?
Thanks!
try removing transparent from
background: url("pic.gif") no-repeat scroll left top transparent !important;
i am developing website for one political party(not client,my own purpose) using wordpress software. i am modifying theme called fresh life by theme junkie. actually i am not a front end developer, but i am putting my max efforts to change the theme styles that matches to political party flag.
First of all, website which i am modifying styles is www.ysrcong.com. political party flag URL is http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg .
i am trying to put background color of left part of the web page with 2266BB , right part of the web page with 0FBD60 and middle part of the page with white color.middle part of the website width is 950px. there is no specific widths for left and right.
i have googled and found out one solution. solution i have implemented is , i have designed one image with colors 2266BB and 0FBD60 of same width and height and color 2266BB in left and other in right.
i have set that image as background in all webpages. seems working fine in majority browsers with some small issue. issues i am facing are
1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it was left some height and that part was filled with background image
kindly please give me suggestions how to solve these two issues and also if any other effective solution to achieve this.
following code i have written.
html code
-------------------------
<body>
<div id="bg"><img src="bg.png" width="100%" height="100%" alt="">
</div>
<div id="#wrapper">
webpage content goes here.
</div>
</body>
styles i applied.
---------------------------------
body {
height:100%; margin:0; padding:0;
}
html {
height:100%;
}
#bg {
position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
background: #fff;
margin: 0 auto 0px auto;
padding: 10px 15px 0 15px;
width: 950px;
position:relative;
}
Delete the #bg div that you created for the background
Create an image 1px high by 3000 + px wide. Split the image in half with the right and left side being teh colors that you want
set the body tag in css to background: url(path/to/your/image) repeat-y center top;
Celebrate, you are finished
My inclination would be to do something like this.
HTML
<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>
With the CSS
html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}
Link here: http://jsfiddle.net/folktrash/EQE6K/
For flexibility, I would personally use css gradients like these on the body :
background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left, #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right, #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */
You could then have a "background-image" fallback for old browsers.
I have an image for a background for a div that doesn't exactly fit. Is there a way, using css, to change the size of the image (e.g. background-size:10%)?
.header-tab { background: transparent url(/resources/images/light-green-gradient.png) repeat-x scroll 0 0; }
background-size is a css3 value which can be set
see: http://www.w3.org/TR/css3-background/#the-background-size
or use this method
http://css-tricks.com/how-to-resizeable-background-image/
background-size isn't implemented yet in any browser, but there is -*-background-size for the newest versions of Mozilla, Webkit, Konqueror and (buggy) Opera:
background-size: 10%;
-moz-background-size: 10%;
-o-background-size: 10% auto; /* Opera needs x AND y values, or no background! */
-webkit-background-size: 10%;
-khtml-background-size: 10%;
Don't use it in Opera together with background-attachment:fixed.
Mozilla Developer Center has more and a workaround for Firefox 3.5.
For older browsers, you can emulate it with an img like in Jimmy's second link, but then of course you'd have to figure out how to hide that image from new browsers.