This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Problem with div block background

4 years ago · Last reply by Andrew Misplon 4 years ago

Hello There,
I am still new to programming with HTML and CSS, and i have a small problem. I have put a div block inside a hero image, which works perfectly fine, however the background of that div-block is not transparent. I have tried to counter this with using a background-color: transparent; which isn’t working.
NOTE: The following code has some german text in it, as it is my main language.
My HTML:


        Dreisam Republik

                    <a href="#">Forum</a>
                    <a href="#">Impressum</a>
                    <a href="#">Über uns</a>

            <a href="#">Login

              Die Dreisam Republik

                Die Dreisam Republik ist ein Ein-Wöchiges Projekt, wo das DFG/LFA eine eigene Wirtschaft aufbaut


And here is my CSS:@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
}

li, a, button {
  font-family: "Montserrat", sans-serif;
  font weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}
.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0,3s ease 0s;
}

.nav__links li a:hover {
  color: #0088a9
}

button {
  padding: 9px 25px;
  background-color: rgba(0,136,169,1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0,3s ease 0s;
}

button:hover {
  background-color: rgba(0,136,169,0.8);
}

h1 {
  margin-top: 40px;
  margin-left: 65px;
  margin-bottom: 20px;
}
.Banner {
  background:url("DRHI.png");
  padding-top: 40%;
  }
.Banner_Content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: transparent;
  text-decoration: none;
}

I would appreciate some help regarding my Problem
Have a nice Day!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Andrew Misplon Staff 4 years, 7 months ago

    Hi Lulu

    Thanks for reaching out.

    It isn’t necessary to wrap your snippet in an HTML tag, you can remove the HTML and body open and closing tags. Your first CSS rule * will target every element on the page and on every page. Is that intentional?

    Please, send a link to the page concerned and we’ll take a look.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread