html - Gray out background image without affecting nav bar or text -
so i'm trying gray out background image (oldrag.jpg), keep nav bar , other text on home page on top of , still in color. code i've pasted has background image code removed. i've tried of different ways of graying out background image in html, css, , html , css, , none of them work correctly. either gray out nav bar , text, or push nav bar down , text gets stuck in image.
index.html
<html> <title>edited privacy - index</title> <style> ul { list-style-type: none; margin: 0; padding: 0; } a:link, a:visited { display: block; width: 100px; font-weight: bold; color: #ffffff; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7a991a; </style> <ul id="nav"> <li><a href="index.html">home</a></li> <li><a href="contact.html">contact</a></li> <li><a href="resume.pdf">resume</a></li> <li><a href="edited privacy">blog</a></li> <li><a href="edited privacy">github</a></li> </ul> <br> <body> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <h2><center>welcome!</center></font></h2> <p><center>thanks checking out personal website! please feel free browse content! </center></p> </body> <div style="position: absolute; bottom: 15px; "><font color = #ffffff>© 2014 edited privacy</div></font> <div style="position: absolute; bottom: 0px; "><font color = #ffffff>hosted github</div></font> </html> stylesheet.css
#nav { width: 100%; margin: 0; padding: 0; text-align: center; list-style: none; } #nav li { display: inline-block; text-align: center; }
i don't know if got correctly.. ..but suggestion is:
*since it's single background image, if have photo editor "photoshop", take (the image) editor , apply overlay make gray (black&white).
*then apply css below body tag:
html { background: url(oldrag.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } //edit start #nav { //notice didn't include ul tag. i'm assuming you're having 1 in page id of nav width: 100%; margin: 0; padding: 0; text-align: center; list-style: none; } #nav li { display: inline-block; text-align: center; } a:link, a:visited { display: block; width: 100px; font-weight: bold; color: #ffffff; background-color: #98bf21; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #7a991a; } //edit end also, since have external stylesheet, why not take out styling in "index.html" , put there.. ..it avoid repetition.
and please put navigation menu inside body tag.
Comments
Post a Comment