Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transparent gradient for top and bottom of background image css

Is it possible to place transparent gradients over both the top and the bottom of a background image? At the moment I can only find it being done on one or the other.

UPDATE:

Tried by putting 2 with in the area that the background image is being applied then used two classes(one the reverse of the other to try and create the desired effect but it didn't quite workout. I'd also like it if possible if it didn't affect any other content and it's positioning within the section it is being applied.

CSS

.picture-gradient {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -o-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -moz-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
padding: 15px;
margin: -15px;
}

.picture-gradient2 {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -o-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -moz-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
padding: 15px;
margin: -15px;
}

HTML(Basic)

<div id="photo-place-holder">
    <div class="picture-gradient2"></div>

    enter code here

    <div>
        <p>Text</p>
        <p>More Text</p>
    </div>

    <div id="search-bar2">
        <form class="form-wrapper2 searchbar2">
            <table id="search-table" cellpadding="0" cellspacing="0">
                <tr>
                    <td><input type="text" placeholder="Search for activities and places" required /></td>
                    <td><button type="submit"><img src="Logos/search_white_48px.png" height="28px" width="28px" /></button></td>
                </tr>
            </table>
        </form>
    </div>

    <div id="search-categories"></div>
    <div id="photo-details"></div>
    <div class="picture-gradient2"></div>
</div>
like image 539
Schonge Avatar asked Dec 06 '13 12:12

Schonge


2 Answers

You can have multiple stops in a gradient, so if you wanted the top 10% to fade to transparent and the bottom 10% to fade back, you could do something like this:

background-image: linear-gradient(
    to bottom,
    rgba(64, 64, 64, 1) 0%,
    rgba(64, 64, 64, 0) 10%,
    rgba(64, 64, 64, 0) 90%,
    rgba(64, 64, 64, 1) 100%
);

Demo with <img> tag: http://jsfiddle.net/sh6Hh/ or without the extra <div>: http://jsfiddle.net/sh6Hh/262/

Demo with css background picture: http://jsfiddle.net/sh6Hh/1/

like image 120
xec Avatar answered Sep 17 '22 19:09

xec


Something like this?

JsFiddle

http://jsfiddle.net/r3wN8/

CSS

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(41,137,216,1) 50%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */

Generated by http://www.colorzilla.com/gradient-editor/

like image 37
gaynorvader Avatar answered Sep 18 '22 19:09

gaynorvader