I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for mobile devices.
As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.
Ideally I would like to get the css3 gradient and separate background images working on all browsers, I'v been happy to use a single background image for all IE browsers, but so far the single background image wont work for IE.
CSS in main style.css
body{
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-attachment:fixed;
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-color:#509deb;
display:block;}
CSS for Internet Explorer: style-ie.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image: url('img/bknd_full_img.jpg');
background-attachment:fixed;
background-position:center top;
background-repeat: no-repeat;
background-color:#fff;
display:block;
}
The problem is that you only give the gradient and multiple background to WebKit (using the old syntax) and Firefox (using the slightly newer syntax). There is no way that either IE or Opera can display the gradients or multiple backgrounds as you don't supply their prefixes or the none prefixed version.
IE10 implements gradients using the latest and final syntax, without prefixes. The latest Opera does too, and so does recent Firefox. IE10 doesn't need your conditional comment code, as it will work the same way as the other browsers.
The radial gradient should become something like:
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png),
radial-gradient(circle closest-side at center, #c0deff, #509deb);
More details on the syntax changes can be found on the IE blog [0] and the spec [1]
[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx ,
[1] http://dev.w3.org/csswg/css3-images/#radial-gradients
Related
I'm having a bit of trouble with some images rendering differently in different browsers. As you can see in the images, the background is very different in all 4 different browsers. All browsers are up-to-date, but Safari is by far the worst of them all. And it is actually worse when you look at the website instead of the screenshots. But you get the point.
My question is, why is there so much difference? And can it be fixed.
And the CSS is:
body {
background:url('../images/bg.jpg') no-repeat center top fixed;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-khtml-background-size:cover;
-o-background-size:cover;
background-color:#000000;
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
overflow-y:scroll;
}
I have a site running joomla 3.0, and I'm trying to customize the menu bar.
The template is protostar and Im using the nav-pills style to make the menu bar run horizontal on the top.
The problem that I have is that I cannot find where I need to change or include css to CHANGE the rollover BLUE color on the submenu.
Also I would like to know how to change the color on that white little arrow on the submenu.
Image of the menu I want to edit
The overall tip worked for me as well. Joomla 3.x must use the .navigation .nav-child:hover section as above.
I also had to change the gradient lines section as one of them was being invoked.
Just changing the background lines did not show up.
I though about deleting them but instead made the start/stop the same.
Guessing that what gets used is a browser based choice if an option fits.
Just went on the Bootstrap site and inspected the element and it appears to be on lines 2927 to 2934 of bootstrap.css:
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
background-color: #0081c2; is for non CSS3 compatible browsers and everything below is for CSS3 compatible.
Do bare in mind that Joomla may have changed things around in the bootstrap.css file so it may be on a different line, however you can simply search for the following:
.dropdown-submenu:hover > a
Hope this helps
Thankx for the Help Lodder! Saddly it did not worked. I found that I had to change not the .dropdown-submenu:hover > a { but instead .navigation .nav-child:hover > a {
Still thankx for taking to time on trying to help me!
Had the same problem. You can use this selector:
.navigation .nav-child li a:hover{
The KEY THING though is to set
background-image:none;
as the default style uses a gradient, not just a background colour!
how can i modified this plugin http://srobbin.com/jquery-plugins/backstretch/ to auto-keep the background ratio when windows is resize like http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php.
i like the smooth fade effect in "backstrech" i would like to keep
this plugin but if anyone have a better plugin that does what i'm
looking for with the smooth effect between images.
Thanks
try to add this to your Css file
html {
background: url(../img/pattern.png) fixed, url(../img/background-image.jpg) 50% 50% fixed no-repeat;
-moz-background-size: auto, cover; /* Firefox 3.6 */
background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
}
I was wondering if there is a way to apply a text gradient in Firefox? I can get it to work in Chrome and Safari and the code goes like:
h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
text-transform: uppercase;
font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
}
But there doesn't seem to be anything out there for Mozilla.
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
FireFox does now appear to support the webkit parameters, aliasing -webkit-background-clip as background-clip (webkit doesn't alias it, hence the most compatible way at present appears to be to use -webkit-backgroup-clip as both FF and WK understand it)
What I'm trying to accomplish is creating a gradient using only css... What I'm doing works in all browsers except firefox 3.5...here's the code:
#gradient {
color: #fff;
height:50px;
padding:0;
width:940px;
margin:0 auto;
background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%,#5DA331 97%, #659635 100%);/* For Mozilla/Gecko (Firefox etc) */
}
I left out the background for the other browsers... SO here's my question...
Does anyone know why this is not working in Firefox 3.5 and what would work???
As far as I know, the reason why its not working is because -moz-linear-gradient was only introduced in Firefox 3.6.