html - Cover background-image with transparent background-color -
i'd place transparent, blue background color on background image, can't seem color overlay on image.
update: changed margins name takes 70% , margins 30%. however, doesn't overlay on 2 margins. (see updated fiddle)
any ideas on how?
html:
<body> <div id="name"> <h1 id="h" ><a href=#>h</a></h1> <h1 id="e" ><a href=#>e</a></h1> <h1 id="l" ><a href=#>l</a></h1> <h1 id="l2" ><a href=#>l</a></h1> <h1 id="o" ><a href=#>o</a></h1> </div> </body>
css:
body { font-family: 'sigmar one', cursive; font-size: 75px; color: white; text-shadow: 5px 5px 5px #000; background-color:blue; background: url(http://placekitten.com/500/500) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; margin: 0; } div { position:absolute; height:100%; width: 70%; margin: 0 15% 0 15%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align:center; height: 1em; border: 1px solid black; } { /*border: 1px solid black;*/ display: inline-block; line-height: 100%; overflow: hidden; } a:visited, a:hover, a:active { text-decoration: none; color: white; } a:link { text-decoration: none; color: white; text-shadow: 3px -3px 0px black; } a:hover { text-shadow: 5px 5px 5px #000; color: white; }
fiddle: http://jsfiddle.net/dqy8a/2/
check fiddle, hope helps.
i added div inside body
<div class = "overlay"> <div id = "name"> .... </div> <div>
and set it's background color background: rgba(0,0,255,0.5);
last number opacity of color
new css
.overlay{ background: rgba(0,0,255,0.5); margin: 0px; width: 100%; height: 100%; }
you should remove margins div.overlay
, work
i updated link
p.s. shouldn't set properties such width
, height
, display
div
affect divs on page , use classes instead of tag names set properties
Comments
Post a Comment