How to use !important rule to overwrite image background

Question

0.00/5 (No votes)

See more:

hi;

i have a blogger blog, in which i have used .post-body img attribute to set background image for all images in posts,i have used it in template.

CSS

.post-body img{
padding: 15px;
background: white url(http://2.bp.blogspot.com/_v5IxGTiMTD8/S-fvVo_2M5I/AAAAAAAABYU/BefAQpEmaCQ/s1600/grad.png) top repeat-x;
border: 1px solid #DEDBD1;
margin: 5px 5px 5px 5px;
}

but due to some reasons in some posts i don't want to use background image in post images, so i found !important rule to use for it and add it in new post image attribute, but it does not work,

HTML

<pre><span class="style28"><img height="30" src="http://www.website.com/features/1.gif" background-image: none !important; style="border: 0px; height: auto; max-width: 100%;" width="30" />&nbsp;All popular browsers and applications are supported!</span>

but it does not work, so please help me to use it properly.
thanks

Posted 29-Sep-12 23:53pm

askfriends

Updated 30-Sep-12 18:00pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Zoltán Zörgő** · Answer 1 · 2012-09-30T00:23:00

!important if for overriding higher priority attributes, and not for higher level attributes. An example: something specified in the style attribute overrides what's specified in the css class. Also css class name order in the class attribute is messing up the effective style. As well direct specification will override cascaded one. But if you have an outer element with any css specification and an inner element with an other one, the inner specification will simply override the inherited one. So you have multiple choices.
But anyway specifying background-image: none !important; will have it's effect, if any other higher priority specification is not available on place.

Update:
According to your code posted, you are using the style in a wrong manner.

CSS

<span class="style28"><img height="30" width="30" src="http://www.website.com/features/1.gif" style="border: 0px; height: auto; max-width: 100%; background-image: none !important;" />All popular browsers and applications are supported!</span>

After all it is not wise to mix css, inline style and inline formatting attributes.

Sandeep Mewara · Answer 2 · 2012-09-30T00:03:00

Solution 1

Try:

CSS

#example {
    background-image: none !important;
}

Have a look at these to know more:
The CSS Important rule[^]
Using !important with CSS[^]
!important CSS Declarations: How and When to Use Them[^]
When Using !important is The Right Choice[^]

Posted 30-Sep-12 0:03am

Sandeep Mewara

Updated 30-Sep-12 0:52am

v2

Comments

askfriends 30-Sep-12 6:13am

thanks for quick response.
but you have not understood my question. I want to remove background image while your solution suggests to add new image.
how can i remove background image from post images as i have already set above mentioned post-body img attribute.

Sandeep Mewara 30-Sep-12 6:52am

I gave sample example earlier. Updated with exact what you need.

askfriends 1-Oct-12 0:51am

didnt work both solutions, i have updated my question

Sandeep Mewara 1-Oct-12 2:07am

Add this as one of the properties in STYLE: background-image: none !important;

Best way of implementation is to define CSS stylesheet and handle all these there. In HTML, just play with CSS class names. It will work. try out.

askfriends 1-Oct-12 2:15am

thanks sandeep for kind response.
i have also did it but it didnt work.
i created new class in template style and added your mentioned code in it, but in vain..!

Sandeep Mewara 1-Oct-12 2:17am

There must be some mistake. I have done it in past and was all good and working.

Make sure that the CSS is getting applied. Try to put a border or backcolor to check if it is.