CSS Button: 100% Gradient-filled div with image overlay only covering top half

Question

The end result should look like this: Button Comp

My button, with the image deleted, correctly displays my radial gradient perfectly (fills up the container completely). Once I add the image to the HTML, my gradient gets lost.

The image only takes up about 135px (from the top) leaving about 70px at the bottom of the container. I want the gradient to show inside this 70px area. For some reason, this area displays as a white background.

Basically let's say I have a container that has a height of 500px and is filled completely with a radial gradient. I place an image and position it center, top. the image has a height of 250px. The container should display the image in the upper half and the gradient in the lower half. Is this far fetched or what?

NOTE: With these classes below, the .sm and .lg are only in place to change the button size based on the number of buttons on my page.

Here's my button HTML:

`<a href="#"><div class="imgButton <?php echo $buttonSizeClass; ?>" style="background:transparent url(<?php echo $answer["image"]; ?>) no-repeat; background-size: 100% auto;"><label><input type="checkbox" value="<?php echo implode(",",$answer["keys"]); ?>" /><?php echo $answer["label"]; ?></label></div></a>`

Here's my CSS:

`.expert-advice .imgButton input[type=checkbox] {display:none;}

.expert-advice .imgButton {
    background-size: cover; 
    background-origin: content-box;
    background-position: top left;  
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-color: transparent !important;
    border:1px solid #e3e3e3;
    text-align: center;             
    color:#ff6600;  
    display:inline-block;       
    position: relative;
    overflow: hidden;
    margin-right: 15px;
}

.expert-advice .imgButton.sm {
    width: 106px; 
    height: 98px;   
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;  
    font-size:.8em !important; 
}

.expert-advice .imgButton.lg {
    width: 205px; 
    height: 188px; 
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px; 
    font-size:1.0em !important;
}

.expert-advice .imgButton label {
    width: 100%; 
    height:auto; 
    position: absolute; 
    display:block; 
    top:80%;
}

.expert-advice .imgButton:hover {   
    background-color: #fcf1cc;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5YzYzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 30%, #f9c636 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(30%,#ffffff), color-stop(100%,#f9c636)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #ffffff 30%,#f9c636 100%); /* W3C */
    -moz-box-shadow: 0px 1px 18px -8px #000000;
    -webkit-box-shadow: 0px 1px 18px -8px #000000;
    box-shadow: 0px 1px 18px -8px #000000;

    border:1px solid #f8bf1f;
}`

Can you show example on jsfiddle.net? This may help in finding solution. — doktorgradus, Sep 06 '13 at 21:25
Thank you @doktorgradus, i added a link to a comp I created in Photoshop. I hope this helps. — DanalyDesign, Sep 06 '13 at 21:37
Nice pic. But I had in mind HTML and CSS code for button. Please create jsfiddle which illustrated your problem with button. — doktorgradus, Sep 06 '13 at 21:47
[jsfiddle example](http://jsfiddle.net/danalydesign/Zcga2/7/) — DanalyDesign, Sep 06 '13 at 22:03

score 0 · Answer 1 · answered Sep 07 '13 at 05:29

0

Your :hover background property is overwriting your button background property. This is the expected behavior of CSS, since the :hover selector is more specific. What you need instead, is to combine the background properties into a single statement. This is called multiple backgrounds and it is well supported by browsers.

Try this CSS instead:

.imgButton:hover {
    background-image: url(http://www.danalydesign.com/finding-time.jpg), radial-gradient(ellipse at center,  #ffffff 30%,#f9c636 100%);
}

Example Fiddle

The background images are stacked with the 1st image sitting on top and the last image sitting on bottom. more on background image stacking order

answered Sep 07 '13 at 05:29

BigMacAttack

4,479
3
30
39

I really appreciate your @BigMacAttack assistance with this headache I've been dealing with. The only isue I'm seeing with this is my IE9 isn't responding as expected (based on the "well supported browsers" link you sent). I have IE 9.0.8112.16421 installed. Based on that link you sent, IE9 should be supported. i hate to ask, but, any ideas? – DanalyDesign Sep 09 '13 at 13:57
Check out [this SO answer](http://stackoverflow.com/a/16179532/1190255). One of the possibilities is to use a `filter:` declaration. However, radial gradients aren't supported by `filter:` declarations so you'll have to fallback to a horizontal gradient. That may not be that big of an issue for you since the image will be covering most of the gradient. – BigMacAttack Sep 09 '13 at 15:50

CSS Button: 100% Gradient-filled div with image overlay only covering top half

1 Answers1