Gray out background image without affecting nav bar or text
Question
So basically I'm trying to gray out my background image (OldRag.jpg), but keep the nav bar and other text on the home page on top of it and still in color. The code I've pasted has the background image code removed. I've tried all of the different ways of graying out background image in HTML, CSS, and HTML AND CSS, and none of them work correctly. They either gray out the nav bar and text, or they push the nav bar down and the text gets stuck in the image.
index.html
<html>
<title>Edited for 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 for privacy">Blog</a></li>
<li><a href="Edited for 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 for checking out my personal website! Please feel
free to browse the content! </center></p>
</body>
<div style="position: absolute; bottom: 15px; "><font color = #FFFFFF>© 2014 Edited for privacy</div></font>
<div style="position: absolute; bottom: 0px; "><font color = #FFFFFF>Hosted by 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;
}
1 answers
solution1
0 ACCPTED 2015-08-16 21:55:29
I don't know if I got you correctly.. ..But my suggestion is:
*since it's just a single background image, if you have a photo editor like "photoshop", take it (the image) into the editor and apply an overlay to make it gray (Black&white).
*then apply the css below to the 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 I didn't include your ul tag. as I'm assuming you're having just one in the page with the 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 you already have an external stylesheet, why not take out the extra styling in your "index.html" and put it there.. ..it will help you avoid some repetition.
And please put the navigation menu inside the body tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.