1

I am currently trying to design some Call-to-action buttons, and I have made a dynamic width button, which is built by a left and right container and then a middle container holding all the text.

The picture in the middle is a 50 px and repeating.

My problem is, that when the picture is <=50px, the green colours in the background picture appears correct. When it is >50px (and the background-picture is repeating) the green color appears to change.

Does anyone know what I have done wrong?

Here is two pictures showing the problem:

The blurred one: http://d.pr/i/fz2b

The correct one: http://d.pr/i/cjgp

EDIT:

I am doing it as follows:

<a href="#">
    <div class="left"></div>
    <div class="middle">Link text here</div>
    <div class="right"></div>
</a>

My backgrounds in .left and .right aren't repeating. My background-picture is only repeating on overflow - and when it overflows the picture changes it's green color. :-)

denlau
  • 916
  • 2
  • 9
  • 21

1 Answers1

-1

you have not done any thing wrong. It is because Image stretches it blur's rather try using png image in a div with proper background color as you desire

Here's an example

Fiddle

Heres a simple html

<div class="cont">
<img src="http://www.iconsdb.com/icons/preview/moth-green/right-circular-xxl.png" class="img"/>

Let me know if you have any doubts

Anobik
  • 4,841
  • 2
  • 17
  • 32
  • He's using a background image and using background-repeat (apparently) so the center image is NOT stretching at all. That's why we need to see a JSFiddle to actually checkwhat is going on. – Paulie_D Sep 27 '13 at 09:44
  • if you compare the two images then you get to understand what kind of stretching nd blurring he's talking about. And it is obvious in case of images. – Anobik Sep 27 '13 at 09:52
  • I can see the image he supplied but I don't know how he is handling the ACTUAL **background** images. If as he says he is using bg-repeat then they will not be stretching at all. That's why we need a fiddle with the actual images he's using/ – Paulie_D Sep 27 '13 at 10:03
  • I have added an example of my HTML and what I do with the repeat. Hope it helps. – denlau Sep 27 '13 at 12:42
  • to ease your things this is working http://jsfiddle.net/hpZF9/ check with your code. and do give the css if possible – Anobik Sep 27 '13 at 12:58