Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Theme – Transparency of home page main image
Tagged: gradient, home page, transparency
- This topic has 5 replies, 3 voices, and was last updated 8 years, 10 months ago by
tfmwa.
-
AuthorPosts
-
March 22, 2015 at 12:59 pm #145212
jufo
MemberHi
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-fullMarch 22, 2015 at 1:25 pm #145215bleubeard
Memberfrom TFMWA:
This question has been answered before here:
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.
March 22, 2015 at 1:54 pm #145217bleubeard
MemberDid this work for you? I just realized that I have not been able to make it work for me.
March 22, 2015 at 2:26 pm #145225jufo
MemberThanks, 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.
March 22, 2015 at 2:40 pm #145228tfmwa
ParticipantI 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%; }
April 6, 2016 at 3:54 am #183028tfmwa
ParticipantPlease 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; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.