CSS sliding door background image problem.

Question

I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.

Trying to create a simple rounded corner link button:

html:

<a href="#"  class="link_button"><span>Add A New Somthing</span></a>

css:

    .link_button {
        background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial;
        height: 41px;
        margin-right: 6px;
        padding-right: 14px; 
        text-decoration: none;
    }

    .link_button span {
        background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
        display: block;
        line-height: 31px;
        padding: 5px 0 5px 14px;
    }

    .link_button:active {
        background-position: bottom right;
        color: #000;
        outline: none; 
    }

    .link_button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; 
    }

results:

The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.

I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.

Did I miss something?

Thanks in advance.

Answer 1

Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.

Try previewing in Firefox and let us know if its the same?

Answer 2

Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."

There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.

Answer 3

ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.

Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.

If you still can't see it, move your head vertically up and down to see you monitor from different angles.

Answer 4

Hey man, you image has a transparency set to the button. Look at your layer... maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image??