: Can't figure out why my opacity overlay isn't showing 100% TL:DR Just look at the image attached (very bottom). :) More details: Read it all, because I probably need more help than I realize.

Posted in: #Css #Opacity #Overlay #WebsiteDesign

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]

10.02% popularity Vote Up Vote Down

: Applying Blending Options to group doesn’t work as expected When applying my Gradient Overlay to a group of layers, the gradient doesn’t size to fit the minimum frame of the layers in that

@Smith574

Posted in: #AdobePhotoshop #Layers #LayerStyle

0 Comments

: How to select HEX values / colors in Inkscape How to select web colors in Inkscape? I know that I can select the ">" at the bottom-right of the screen and select WebHex and then select one

@Smith574

Posted in: #Color #Inkscape #WebsiteDesign

2 Comments

: Transparent gif blurring when saving for web? I'm editing out the background of a gif for the first time (I've done it for pictures before) and I noticed when i save for web the layers that

@Smith574

Posted in: #AdobePhotoshop #Export #Transparency

1 Comments

: How do I change the text of 10 text layers simultaneously? I downloaded a custom image, it's like gold font, and it consists of 10 different text layers. Whenever I click on a text layer

@Smith574

Posted in: #AdobePhotoshop #Text

1 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Murray976

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

10% popularity Vote Up Vote Down

@Courtney577

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 - 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 - jsfiddle.net/ry4ummkp/2/

10% popularity Vote Up Vote Down

Feed

: Can't figure out why my opacity overlay isn't showing 100% TL:DR Just look at the image attached (very bottom). :) More details: Read it all, because I probably need more help than I realize.

More posts by @Smith574

: Applying Blending Options to group doesn’t work as expected When applying my Gradient Overlay to a group of layers, the gradient doesn’t size to fit the minimum frame of the layers in that

: How to select HEX values / colors in Inkscape How to select web colors in Inkscape? I know that I can select the ">" at the bottom-right of the screen and select WebHex and then select one

: Transparent gif blurring when saving for web? I'm editing out the background of a gif for the first time (I've done it for pictures before) and I noticed when i save for web the layers that

: How do I change the text of 10 text layers simultaneously? I downloaded a custom image, it's like gold font, and it consists of 10 different text layers. Whenever I click on a text layer

Login to post a comment!

2 Comments

Back to top | Use Dark Theme