Altitude Theme – Transparency of home page main image

[jufo]

Hi
I am using the Altitude Theme. On the home page, the theme is using a transparency gradient over the main image, but for the image I am using, it is too dark, how can I change this?

Thanks

http://my.studiopress.com/themes/altitude/#demo-full

[bleubeard]

from TFMWA:

This question has been answered before here:

Altitude Pro front page images shading

Read the following article about CSS gradients to understand how they work:

http://www.w3schools.com/css/css3_gradients.asp

In the Altitude Pro style.css Front Page section you’ll find:

.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%;
}

Play around with the number values – particularly the last one after all the zeros – (and perhaps even percentages) to achieve the effect you want.

Always make a backup of your website and current css file before making any changes.

[bleubeard]

Did this work for you? I just realized that I have not been able to make it work for me.

[jufo]

Thanks, yes it worked.

For this kind of gradient, there are actually four different numbers in each of the six different lines you have to change. I changes them to 0.1, 0.2, 0.4 and 0.7 (in bold below). The lines all start with 'background: ....'.

I changed mine to this and it is much better:

.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0.2)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

Good luck.

[tfmwa]

I personally went with the following one, which is slightly darker than @jufo's.

.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33000000′, endColorstr=’#e6000000′,GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

[tfmwa]

Please note that !important now needs to be added to each line before the semicolon for this change to the gradients to work.

For example, for a lighter gradient:

.image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.7) 100%) !important;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.7))) !important;
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
	background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.5) 80%,rgba(0,0,0,0.7) 100%) !important;
}

[Author]

Posts