Making a grid transparent

Question

I have a page with a background image. When I put a grid onto the page I can't make it transparent so that you can see the background image.

.grid-container {

display: grid;

grid-template-columns: auto auto auto;

padding: 5px;

}

.grid-item {

padding: 20px;

font-size: 15px;

text-align: left;

}

If I delete the navbar CSS the grid gets a black background

.navbar {

margin-bottom: 0;

border-radius: 0;

background: #F0F3F4;

}

Here is the page, still under construction

http://www.victorianrailways.net/europe2024/europe2024_01.html

Ben M · Accepted Answer

Your navbar has both a navbar and navbar-inverse class. If you remove the color from "navbar" you end up with the inverse background which is #222 which is nearly black (#000). If you want a transparent effect remove the navbar-inverse class and just add an inline style so this doesn't impact all navbars like:

Nancy OShea · Answer

Bootstrap's "navbar-inverse" has a light gray background by default. Is that what you're struggling with? I don't see any black containers.

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

See screenshot:

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.