CODEWITHSUNDEEP
htmlcss
Saikios
Saikios

Reputation: 3721

Overwrite Parent style on css

I have the following scenario.

I need to customize all links on a website to have an orange background.

.have-all-links-orange a{
    background-color: #F59522;
}

however when I do this all images inside an A get the same background, I tried with this but didn't do the trick

.have-all-links-orange a img{
    background-color: transparent;
}

Any ideas on how may I fix this?

UPDATE

Fiddle

Upvotes: 0

Views: 252

Answers (5)

Keith
Keith

Reputation: 4137

If you have to have your images in a different display, you can always use jquery to get rid of the color:

https://jsfiddle.net/616d530s/2/

$('.have-all-links-orange a img').closest('a').css('background', 'transparent');

Upvotes: -1

dippas
dippas

Reputation: 60573

Problem:

because img is by default an inline element therefore creates a gap and has vertical-align:baseline by default.

Solution

  • set display:block in img

.have-all-links-orange a {
  background-color: #F59522;
}

.have-all-links-orange a img {
  background-color: transparent;
  display: block
}
<div class="have-all-links-orange">
  <a href="www.google.com">
    <img src="https://www.google.com.pe/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <br />
    <a href="http://www.google.com">click here<a>
<div>

Upvotes: 2

Amr Eladawy
Amr Eladawy

Reputation: 4358

You can do this

.have-all-links-orange a img {
  background-color: transparent;
  display: block;
}

Here is a forked fiddle

How to get anchor tag on background image of div?

Upvotes: 1

blecaf
blecaf

Reputation: 1645

make the image a block element.

.have-all-links-orange a img {
    display: block;
     background-color: transparent;/**You don't need this**/
}

Upvotes: 1

Vladimir Jovanović
Vladimir Jovanović

Reputation: 5561

Hm.. maybe like this? You did say "ALL of the links to have oragne background".

a {
 background-color: #F59522;
}

Upvotes: -1

Related Questions