How do I remove background-image in css? - html

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 //}

Related

Linear gradient not appearing in firefox even though correct prefix is used

Recently I have been coding a clicker game, and have found the need to use a meter to display progress. I wanted the meter to have a gradient that goes from light pink to cyan, and it works perfectly on chrome. However, when I used my home computer and booted up firefox; the gradient was no longer displayed; and the meter was a dull shade of green.
.pastrymeter::-webkit-meter-optimum-value {
background : linear-gradient(90deg, lightpink, cyan);
}
This is the styling for the meter; and nothing that I have changed fixes it. I tried adding the moz prefix to the background tag; which did nothing. I also tried changing background to background-image to see if it was an element thing; but that also did nothing.
What can I do to fix this?
Looks like you are targeting a non-standard feauture -webkit-meter-optimum-value, that isn't supported in Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value
Try this, it is cross-browser compatible.
background: -moz-linear-gradient(90deg, lightpink, cyan);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
Change the values as you may require
Can you try this second method ?
<div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
width: 200px; height: 100px; text-align: center;">
</div>

How to use css property linear-gradient to gradually change color from red to yellow to green?

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 .

Pre element not respecting right padding

I have a pre element with the following styles:
pre {
background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image: -moz-linear-gradient(#555 50%, #505050 50%);
background-image: -ms-linear-gradient(#555 50%, #505050 50%);
background-image: -o-linear-gradient(#555 50%, #505050 50%);
background-image: linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
color: #fff;
font-size: .8em;
line-height: 2.25;
margin: 0 -2.25em 2.25em;
overflow: auto;
padding: 2.25em;
}
Why, when scrolling the pre element, is the right padding being ignored? I don't want long lines to wrap, I want this behavior (it is not expected behaviour based on the specification, but seems to work in webkit): http://jsfiddle.net/joshnh/Ly5kz/
Here is a link to a live example: http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/#step1
That's not quite how padding works. If your content is being forced past the edge of the box it will continue on without being covered by the background. Padding is room around the inner section of the box. All text that fits in the box will have x amount of space between it and the box edge.
In order to have a padding-like matte/box/border you'll need to have a wrapper div that has the border and padding and add your other styles to the pre.
http://jsfiddle.net/ktJ3g/
pre elements are white-space:nowrap by default, you need to set some sort of wrap attribute. Here are your options: http://www.w3schools.com/cssref/pr_text_white-space.asp
Try white-space: pre-wrap; - Also, I think your kind of abusing the lang attribute by using it to identify the content as containing html or css. I believe it should be used to indicate the language encoding of the content, i.e. en_US, fr_FR, etc
A note for prism.js-based <pre> elements:
You can use the normalize-whitespace plugin:
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
https://prismjs.com/plugins/normalize-whitespace/
https://github.com/PrismJS/prism/tree/master/plugins

background gradient color and background image

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

Simulate image "overlay" with CSS

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.