Can’t figure out why my opacity overlay isn’t showing 100%

by

TL:DR
Just look at the image attached (very bottom). 🙂

More details:
Read it all, because I probably need more help than I realize. 🙂

I created this and everything is nice and simple the way I wanted (I’m a rookie, so I went for something simple) and I keep playing with it (making it worse probably) trying to get my layer background-color: rgba(28,31,29,0.7) to sit 100% over my background-image. What am I missing? I feel like it’s a small fix.

If you have any other tips about unnecessary padding/margin, etc please let me know.

Thank you in advance!

[![* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url(http://www.gecarchitecture.com/sites/default/files/WinsportGather2.jpg);
  background-repeat: no-repeat;
  background-size: cover;

}
.container {
  background-color: rgba(28,31,29,0.7);
  width: 100%;
  max-width: 650px;
  height: 100%;
  margin: auto;
}

.box {
  margin: 25px;
  padding: 20;
  border-radius: 10px;
  border: 3px solid #BC3E40;
}

header, section.who_we_are, section.book_us_today  {
  text-align: center;
}

h1 {
  color: #EDEBEA;
  padding: 15px 0;
  font-size: 3em;
  font-family: Arial, sans-serif;
}

p {
  color: #EDEBEA;
  line-height: 2;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;

}

.btn {
  background-color: #EDEBEA;
  padding: 10px;
  margin: 30px;
  max-width: 300px;
  color: black;
  text-decoration: none;
  border-radius: 9px;
  text-shadow: 1px 1px 6px #333333;
  box-shadow: 1px 1px 2px #333333;
  margin: auto;
}

.btn:hover {
  background-color: #BC3E40;
  color: #EDEBEA;
  text-decoration: none;
}

footer {
  font-size: 10px;
  text-align: center;
  margin-top: 30px;
    font-style: italic;
}][1]][1]

screen shot of the offending error

Answer

Generally it’s desired to apply the darkening and gradient on the same element. This is true when you want the whole image to be darkened (as it seems you want). To do so, you just have to use a linear-gradient:

.container {
    background:
        /* Top color overlay, in this case darkening */
        linear-gradient(
          rgba(28, 31, 29, 0.7), 
          rgba(28, 31, 29, 0.7)
        ),
        /* The image you want to be beneath the color overlay */ 
        url(http://www.gecarchitecture.com/sites/default/files/WinsportGather2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

Demo

Attribution
Source : Link , Question Author : misterhtmlcss , Answer Author : Zach Saucier

Leave a Comment