Home/ Questions/Q 8969285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:34:15+00:00

I’m trying to have multiple backgrounds(1. #fff, 2)img 3)gradient background. But it doesn’t seem

  • 0

I’m trying to have multiple backgrounds(1. #fff, 2)img 3)gradient background. But it doesn’t seem to work

Here is the of what my output should look like

CODE SAMPLE

<div id="send-date" class="transaction-details">
        <label for="date">Send on</label>
        <input type="date" name="date" id="date"/>
</div><!-- /send-date -->

#send-date input {
    background: #fff,
                url(../img/icon_calendar_36x36.png), 
                linear-gradient(btop, #FFFFFF 30%, #BFCBFB 65%, #869CFF 100%);
    background-repeat: no-repeat;
    background-position: 0% 0%, 96% 50%, 0% 0%;
    background-size: cover, 24px, cover;
    border: 1px solid #d9d9d9;
    text-shadow: none;
}

#send-date input.ui-focus{
    background-image: url(../img/icon_calendar_36x36.png);
    background-repeat: no-repeat;
    background-position: 96% 50%;
    background-size: 24px;
    border: 1px solid #a18492;
    background-color: #d9d9d9;
    -moz-box-shadow: inset 2px 2px 8px #AAAAAA;
    -webkit-box-shadow: inset 2px 2px 8px #AAAAAA;
    box-shadow: inset 2px 2px 8px #AAAAAA;
}

DEMO

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems from this article that gradients in css3 are generated as images and can be used instead of url(foobar);

    So my guess is that they may not play too well with images in the same element.

    Try a transparent overlay on your background gradient with the image. Or the other way around.

    • 0