I'm fairly new to HTML/CSS, and am developing a very simple website with a white menu bar on the top (it looks better than it sounds). However, unfortunately the menu bar background is transparent - text seems to appear within the menu bar as I scroll down in the page. How do I make a white background non-transparent?
4 Answers
Without seeing your code, I will recommend a few things.
- set
background: white; - set
opacity: 1.0;
That should do the trick. Please post your code if you are still having problems.
You can accomplish that by declaring background color as white.
Example:
<style>
#menu-id{
background-color: white;
}
</style>
<style>#menuid{background: rgba(255, 255, 255, 0.3);}</style>
<style>#menuid {
background: rgba(255, 255, 255, 0.3);
}
</style>Use background color just like following example, change .box background color #fff to get the white color.
.box {
width:100%;
background:#eee; /*background:#fff; use here white background */
}
.box ul {
margin:0px;
padding:0px;
list-style:none;
}
.box ul li {
display:inline-block;
}
.box ul li a {
display:block;
padding:5px;
margin:1px;
text-decoration:none;
}
.box ul li a:hover {
background:#ddd;
}<div class="box">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
