1

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

  • Have you tried setting the .container margin to 0 instead of auto? – Vicki Sep 10 '15 at 21:12
  • @Vicki just tried that and it didn't change anything. I even deleted it just to be sure. – misterhtmlcss Sep 10 '15 at 21:17
2

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

  • this was really helpful. I thought if I did that I would then overwrite it, so I didn't even think to try it. Thanks for pointing it out! :) – misterhtmlcss Sep 15 '15 at 21:35
2

It is because you have a margin on the class box

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

See jsfiddle - https://jsfiddle.net/ry4ummkp/1/

If you want space between the red outline and the container you can add padding to the container instead of a margin on the box. This may affect your layout.

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

See padding added to container class - https://jsfiddle.net/ry4ummkp/2/

  • 1
    AndrewH thank you! This has moved me one step closer. I really appreciate it. I see now I have a few other issues that I need to work on due to this fix. I really appreciate it. :)) – misterhtmlcss Sep 10 '15 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.