I've defined this class which adds a gradient background colour:
.banner {
background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}
I've also defined a class that adds a background image
.alertBell {
background-image: url("../images/icons/bell.png");
background-position: 5px 50%;
background-repeat: no-repeat;
padding-left: 30px;
}
If I add both these classes to an element, it seems one overrides the other
<h2 class="banner alertBell"></h2>
Is there any way that I can have a background colour and a background image?
you can use CSS3 multiple backgrounds, something like
.banner.alertBell {
background-color:#9FCC1D;
background-image:url("../images/icons/bell.png"),
-moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%);
background-repeat:no-repeat, repeat;
background-position:5px 50%, 0 0;
}
example jsfiddle
see also: How do I combine a background-image and CSS3 gradient on the same element?
The Background css property is actually a combination of background-color, background-image, background-repeat, background-attachment and background-position into one property. Therefore when you set your H2's class property to class="banner alertBell", alertBell class will overwrite any shared properties contained in the banner class.
You could try changing your banner class to:
.banner {
background-color: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}
You could do something like:
<div class="banner">
<h2 class="alertBell"></h2>
</div>
You're having that problem because CSS gradients are defined as background-image, not background-color.
So depending on which one is defined later in the CSS, the background-image will be either .banner or .alertBell
Related
I want to create a legend using html, css which contains change of color gradient from green to yellow to red. I have tried using linear gradient property of css. However, what I got so far is given below:
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
}
<div id="color_range"></div>
My code for color gradient
I need a figure like this:
How can I make a legend like above?
Simply change: background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
To: background: linear-gradient(red,yellow,green);
You can also change it to: linear-gradient(to top, green,yellow,red); but I don't think that to top is necessary
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(red,yellow,green);
}
<div id="color_range"></div>
To understand how linear-gradient works in CSS please read: CSS Gradients
Also take a look at this page that can be helpful when using CSS gradients: https://www.colorzilla.com/gradient-editor/
You can try this.
#color_range{
height:280px;
width:40px
background:linear-gradient(red,yellow,green);
}
You can also use the color codes for these colors .
In HTML when do I use color, and what is the difference between background-color and also the background tag?
What are the differences?
color is referring to the text color in that element.
background-color refers to the background color
background is shorthand to combine many background tags into one line.
background: #ffffff url("img_tree.png") no-repeat right top;
Combines color, image and background image properties in the one line instead of typing our each style individually.
w3schools
I will give you a example using this html element:
<span class="value"> This is my text </span>
.value { color: red, background-color: black}
The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:
background: #00ff00 url("smiley.gif") no-repeat fixed center;
This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.
Quick answer
Color = Text Color
Background-color = the color of the background
Background = gives you the posibillity to set color, image , etc...
great tutorials on this are found here
It is true that background gives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.
background: yellow;
background-color: yellow;
.bc {
background: yellow;
background-color: green;
}
.bc2 {
background-color: green;
background: yellow;
}
<div class='bc'>
bc { background:yellow; background-color:green; }
</div>
<div class='bc2'>
bc { background-color:green; background:yellow; }
</div>
One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:
background:url('https://example.com/image.jpg');
or
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%);
If you are trying to change the background from an image to a color you have to use the background property.
color: is used to add color to the Text within the Tag.
color: blue;
background-color: is used to add color in background of the content inside the tag.
background-color : red;
background: is used for adding different type of background property name to the content within the Tag.
background : red url('image.png') fixed repeat cover;
I have a number of headings and in the background of each I want to show the same gradient color, but a different (non-repeating) background image. I want to avoid duplicating any CSS rules for the background gradient color or background image position, because they will be the same for each heading. In other words, the only thing I should need to specify for an individual heading is the path to the background image file.
Here's what I have at the moment:
<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>
.banner {
/* For old browsers that don't support gradients */
background-color: #9FCC1D;
/* browser-specific prefixes omitted */
background-image: linear-gradient(#75A319, #9FCC1D);
padding: 7px 7px 7px 15px;
}
/* Specifies position of background image */
.bgImage {
background-position: 5px 50%, 0 0;
background-repeat: no-repeat;
padding-left: 30px;
}
.img1 {
background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}
.img2 {
background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}
.img3 {
background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}
There are a couple of problems with this
I have to repeat the linear-gradient style in each .imgX rule
It doesn't render correctly in Chrome, which doesn't seem to support a comma-separated list of background-image and background-repeat properties. This is what gets displayed in Chrome
How can I fix the problem with the way the background is rendered in Chrome while minimising duplication of CSS rules?
Use the :before pseudo-class for your background icons.
.img1:before {
content: '';
float: left;
position: relative;
background: transparent url('img1.png') left top no-repeat;
width: 16px; /* change to actual width of img */
height: 16px; /* change to actual height of img */
}
Or, since you're trying to relieve the amount of CSS, you can specify a class for the gradient and append that in your HTML.
Don, you have two classes which this background gradient can be applied to, bgImage and banner. Simply apply your gradient on to one of those classes and go from there. Also append repeat-x right after your image url to ensure it will repeat across.
Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.
There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.
How can I make it so each active menu link uses the corresponding slice of the blue image?
Like this:
My code so far
Do you think this is possible with CSS?
CSS Only solution for modern browsers:
ul {
background-color:#ff00ff;
background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
height:50px;
width:400px;
margin:0;
padding:0;
border-radius:25px;
overflow:hidden;
}
li {
width:100px;
height:50px;
float:left;
}
li:hover {
background-color:rgba(0,0,255,0.2);
}
Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/
If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:
You can cut out the blue image of the entire thing (you can actually make it wider)
then
li.active {
background: url('path/to/yourImage.png') no-repeat -50px 0;
/* 50px or however wide that rounded tip is */
}
li.active.first {
background-position: left top;
}
li.active.last {
background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */
Are you ever going to have links at the rounded parts? If not, you could just take a pixel-wide slice of the blue image and set that to the :hover state background with repeat-x.
There are definitely other ways to do this but this is the most straightforward IMHO.
Edit: After seeing your fiddle, perhaps this isn't the case. I would consider using JavaScript to calculate appropriate x-offsets for each link, and using a slice of the overlay image in that way. Or you could just make the first link a "special case" and use a generic different-color background for the rest of the links.
I have a general rule which gives all DIVs a background image.
I have one div (with id='a') which I don't want it to have the background image.
What css rule do I have to give it?
Try:
div#a {
background-image:none
}
div#a {
background-image: none;
}
div#a {
background-image: none !important;
}
Although the "!important" might not be necessary, because "div#a" has a higher specificity than just "div".
div#a {
background-image: url('../images/spacer.png');
background-image: none !important;
}
I use a transparent spacer image in addition to the rule to remove the background image because IE6 seems to ignore the background-image: none even though it is marked !important.
Since in css3 one might set multiple background images setting "none" will only create a new layer and hide nothing.
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3.org/TR/css3-background/#backgrounds
I have not found a solution yet...
When background-image: none !important; have no effect.
You can use:
background-size: 0 !important;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);
for older browsers.. if you have defined css in some framewokrk.css like select2.css in IE9 background-image: -webkit-gradient etc. and you want it via another .css rewrite with "background-image: none !important" not works. I used same color to color gradient like page background color.
If your div rule is just div {...}, then #a {...} will be sufficient. If it is more complicated, you need a "more specific" selector, as defined by the CSS specification on specificity. (#a being more specific than div is just single aspect in the algorithm.)
HTML :
<div id="a" class="mydiv"></div>
CSS:
div#a {
background-image:none;
}
Another Way:
div:not(#a) {
//all rules goes here
//add image here
//div with id a not effected by these rules
}
Multiple (not pseudo)
div:not(#a):not(#b):not(#c) {
//all rules goes here
//add image here
//div with ids not effected with these rules
}
Doesn't this work:
.clear-background{
background-image: none;
}
Might have problems on older browsers...
Replace the rule you have with the following:
div:not(#a) { // add your bg image here //}