Altitude Theme: Lessening the Overlay on Background Images

[EricHilton]

I'm making a site with the Altitude Pro theme and would like to make the dark overlay on the front page background images lighter than the default. I was able to remove the overlay by adding this code to my CSS editor:
.image-section {
background: none;
text-shadow: 2px 2px 1px #000000;
}

But now the white font over the images is hard to read. Is there some way to make the background lighter rather than removing it completely? I added the text shadow to help with the readability, by it's still hard to read the text.

I think I might be able to get the result I want by editing the following code, but not sure about what to do exactly:
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

I would appreciate any advice.

http://examplesite.link/

[Victor Font]

Add opacity: .5; to the image-section class.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[EricHilton]

I tried that but it made everything opaque, including the text.

Is there any way I can make just the image slightly opaque so that the font is easier to read?

[Victor Font]

The only other way to do it is to change the opacity for each of the background directives. When using the rgba directive, the first three numbers are the color. The final number is the opacity. In the example of rgba(0,0,0,0.9), the 0.9 is the opacity. http://www.w3schools.com/cssref/css_colors_legal.asp

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[fandom]

Am I allowed to leave a link to the solution I used? If so, this is what I did to lessen the gradient overlay:
http://fandomwebdev.com/2016/06/12/studiopress-altitude-pro-gradient-overlay-fix/

[Christoph]

No problem with links to websites, resources, tutorials, etc. that help people.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts