Div background color in chrome

[pallavi1811]

Hi

I have the below html code: <a class="thumb active" href="#TI42"> <div class="img-wrapper"> <div class="image"> <img src="xyz.png" height="56" width="96" alt=""> </div> </div> <p class="tip-truncate">Receive</p> </a>

Now i am giving background color to class=”img-wrapper”. which comes fine in normal default zoom in chrome. But when i zoom in the border is inconsistent.

below is the css:

`body#tips .toggle-nav .thumb.active .img-wrapper {

cursor: default; background: #0090d8; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #65ccff), color-stop(100%, #0090d8)); background: -webkit-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: -moz-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: -o-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: linear-gradient(top, #65ccff 0%, #0090d8 100%); } body#tips .toggle-nav .thumb .img-wrapper { margin-bottom: 6px; padding: 1px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; }`

[Paulie_D]

Now i am giving background image to class=”img-wrapper”

Are you?

I can see that you are actually putting an image INSIDE the link…where is the bg image being applied?

I’m thinking a Codepen (with proper linked images) would help here.

It might also be useful to see what all this is supposed to look like.

[pallavi1811]

Please see below:

http://codepen.io/pallavi1811/pen/loxEi

Sorry i meant background color. The background color should come as a border for the image. But it is varying on zooming in and out. when 100% zoom, it comes as a four sided blue border which is correct. but when i zoom in to 75% in chrome, either the right side border goes or upper or any of them. What is the solution for this.

[Paulie_D]

The structure you have there seems odd…why do you have an image-wrapper and another div which, in fact, wraps the image with a class of .image?

In fact, why do you need an image wrapper and to to continue on, shouldn’t that image, in fact,** be** in the background?

[pallavi1811]

the structure has to be like this only. This structure is ot created by me. Is there any solution?

[pallavi1811]

Hi

Thanks John but its still not working with this. when i zoom in more than 75% it goes out. i have multiple <a> like this with display:inline. like a gallery it is. So how should i go with this?

Need Urgent help on this.

[Paulie_D]

when i zoom in more than 75% it goes out

Goes out where?

Perhaps you could provide us with a live link to we can see the actual problem because we’re obviously not seeing it in Codepen?

[Paulie_D]

Perhaps a little more like this: http://codepen.io/Paulie-D/pen/bqspv

[Paulie_D]

Here’s slightly different take on it with text inside the anchor

@ Jurotek…Looks nice but he can’t change the HTML structure he has.

My original version does have the text inside the anchor but I only applied the bg color to the image wrapper.

Updated: http://codepen.io/Paulie-D/pen/uALIG

[Author]

Posts