CODEWITHSUNDEEP
css
Neil O'Mara
Neil O'Mara

Reputation: 3

CSS navbar background showing up as white instead of transparent

My navbar background keeps showing up as white instead of transparent no matter what I do.

CSS

body{
    margin: 0;
    line-height: 1.5;
    font-size: 16px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

:before,:after{
    box-sizing: border-box;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

.container{
    max-width: 1140px;
    margin: auto;
    margin-left: 10%;
}

header,
section,
footer{
    display: block;
    width: 100%;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.justify-content-between{
    justify-content: space-between;
}

.align-items-center{
    align-items: center;
}

.header .logo{
    padding: 0 15px;
    width: 125px;
    height: auto;
}

.header .nav{
    padding: 0 15px;
}

.header .nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .nav ul li{
    display: inline-block;
    margin-left: 30px;
}

.header .nav ul li a{
    display: block;
    padding: 25px 50px;
    font: 18px sans-serif;
    color: #5D5D5D;
}

.home-section{
    min-height: 100vh;
    background-color: gray;
}

.home-section .row{
    min-height: 100vh;
}

.home-section .slide{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.home-section .slide:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Neil O'Mara | Portfolio</title>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="logo">
                    <a href="index.html"><img src="/logo.png" alt="logo"></a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="bio.html">BIO</a></li>
                        <li><a href="portfolio.html">PORTFOLIO</a></li>
                        <li><a href="resume.html">RESUME</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <section class="home-section">
        <div class="slide" style="background-image: url('bimg1.jpg');">
            <div class="row">

            </div>
        </div>
    </section>
</body>
</html>

Upvotes: 0

Views: 657

Answers (2)

Christian
Christian

Reputation: 5521

You haven't defined any styles related to background or opacity on the header

Try:

header {
    background: red;
    opacity: 50%;
}

Upvotes: 0

chase
chase

Reputation: 327

What is your expected result? The default browser background color is white. It looks like the header section is not overlapping with the content of the page, and that's why it's still white.

You could add the following code to set a custom background color for the header

header {
  background-color: rgba(0,0,0,0.7);
}

Upvotes: 1

Related Questions