background image not showing css and is automatically set to none - css

i have a div with a background image <div id='mcts1'></div>
now when i view it in chrome, the image does not show, and when press F12 [inspect element], this is what i see:
<div id="mcts1" style="background-image: none;">......
</div>
now i'm wondering how did it happened that the background-image property was set to none when i actually declared it in the css.
here is the css file together with the code snippet where i echoed the <div id="mcts1">fiddler file here:
link

Try changing your CSS starting on line 311 to this:
.navigator{
background: #efefef url(../images/nav.png);
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%) url(../images/nav.png);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%) url(../images/nav.png);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%) url(../images/nav.png);
}

I think this might be coming somewhere from js or jquery..

Related

CSS error from generated gradient linear gradient from colorzilla editor

Thank you so much for taking your time to read this.
Heres the code the colorzilla gradient generator created for me:
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
**background**: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
Next to the line of the bolded background text, I get the following error:
Expected (<filter-function-list> | none) but found 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 )'
I hope someone will be kind enough to help a programming idiot such as myself.
Line
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
is incorrect, according to definition of filter property (1, 2), it can take following values:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"
None of them are responsible for gradient, so you can just remove this line from your code.
Also I don't know what is the purpose of double asterisks around **background**, but them break css code, so you probably should remove them too, and it will be like this:
.gradient {
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
background: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
}
.wide {
width: 100%;
height: 100px;
}
<div class="wide gradient">
</div>

Background color gradient in Ionic 2

I'm trying to set the background-color for my app using $background-color variable in variables.scss file. This works fine when setting just a color, like #000 or #fff, but can't make it work with a gradient.
$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);
This code throws the following Sass error:
argument '$color' of 'rgba($color, $alpha)' must be a color Backtrace.
So, how can I set the background-color to be a gradient?
This is the scss code I use for my own background gradient.
$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);
.side-menu-gradient{
background: -webkit-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
}
(Maybe highly inspired from Ionic Creator - Creating beautiful Sidemenus (YouTube)
If you want to set the background colour of a page, for example home.html page, to a gradient, you should follow these two steps:
In home.html you should have a class called home in the ion-content tag:
<ion-content padding class="home">
...
</ion-content>
Go to home.scss file (create one if you do not have it) and define the home class:
.home {
background: linear-gradient(to bottom, #000 0%, #fff 100%);
}
Make sure this sass is being compiled by importing it into app.css file:
#import "../pages/home/home";
Insert this line of code in your app.css file.
Do ionic run android in your Terminal and ... you'll have a gradient background for your home page!
Done!
$background-color variable won't work instead use $app-background
Example:
$app-background: linear-gradient(to bottom, #000 0%, #fff 100%);

Getting current Quill Editor's toolbar background color

I'm implementing a primeNg/quill editor, and as part of the UX design I need to display a container in the screen with the same color background as the editor's toolbar. I'm looking at the snow.css file but can't seem to find it, any quill experts know where I can find this on snow.css or any other dependent css of Quill? Thank you!
The toolbar background color in the PrimeNG Quill demo is part of the PrimeNG theme and not part of Quill's snow.css.
You can use the developer toolbar in Firefox and Chrome to see the CSS rules:
.ui-widget-header {
border: 1px solid #d9d9d9;
color: #1b1d1f;
background: #f6f7f9 0 0 repeat-x;
background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0));
background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
}
Just put inside a div with background color, and for editing area color use
Style backround color property.
below code for bootstrap and angular
<div class="bg-light">
<quill-editor [styles]="{height: '500px', backgroundColor: 'white'}">
</quill-editor>
</div>

Why doesn't my linear-gradient work in Firefox?

I'm testing my application on Firefox 33. I have a simple background property defined with a gradient:
background: linear-gradient(bottom, #004771 0%, #005185 100%);
and it doesn't work. CanIUse reports that gradients on Firefox 33 can be used without a prefix. So why doesn't it work? If I add a Mozilla-specific prefix:
background: -moz-linear-gradient(bottom, #004771 0%, #005185 100%);
everything works OK.
When using linear-gradient without the prefix, you need to write it like this ("to bottom" instead of "bottom"):
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
EDIT: Link to documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax
You need to use to bottom in order for it to work:
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
jsfiddle

Firefox li href CSS selector

I've styled some list items (li) using CSS. The style's applied to the a selector within the li. It works great in Chrome, IE and Safari but not Firefox:
<ul class="organisations">
<li class="community-care"><a href="http://adviceglos.org.uk/organisation-type/community-care/" title="View all posts in Community Care" >Community Care</a></li>
</ul>
Here's the CSS:
ul.organisations li.community-care a {
background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#5CBCC4),color-stop(100%,#38939B));
background-image: -webkit-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -moz-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -o-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -ms-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: linear-gradient(#5CBCC4 0,#38939B 100%);
background-color: #5CBCC4;
border: 1px solid #318188;
border-bottom-color: #245E63;
}
You have a syntax error in your stylesheet. In particular, line 529 is:
background-image: -o-linear-gradient((#eeeeee 0,#ccc 100%) !important;
Note that you have one more open paren than close paren. In a spec-compliant CSS parser (which excludes WebKit), this causes the UA to treat everything up to the matching close paren as part of the background-image value. In this case, that's all the rest of the stylesheet, so all the rules after this point are ignored.
Further note that Firefox did report this problem in its error console, which is how I found it...
Apply -moz for firefox like this:
background: -moz-linear-gradient(#BF698C 0px, #93506D 100%) repeat scroll 0 0 transparent;

Resources