[bleubeard]

You are amazing!! Thank you!!

I have one other question, that I would be very grateful to know the answer to. Now, when I scroll down, the menu turns black again. I would actually like to just keep it static at the top. Any idea how? THANKS AGAIN!!!!

http://bit.ly/1QmHLkv

[bleubeard]

Thanks for all of your help, tfmwa. It turns out that my styles.css sheet wasn't updating because my server heavily caches everything static, like css. You're awesome!!

[bleubeard]

Thanks for that feedback -- the changes seem then not to be propagating. I used your code (below).

I replaced the original code with your code and saved the changes in the styles.css sheet. The original code is gone, yet no matter how often I delete cookies or open the site in incognito mode, the changes don't seem to propagate. Weird.

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

[bleubeard]

Wow, thank you so much for all the time you have taken to reply!

Sadly, it just won't seem to work -- I might be explaining myself incorrectly. We are talking about the image, right? Here is the site after I inserted the code:

colleges4us.com

Though it is still dark, the actual image is very bright -- it can be seen here:

http://upload.wikimedia.org/wikipedia/commons/3/38/Harvard_Medical_School.JPG

I would be happy to share my login details with you -- my email is [email protected].

Why do you think it is still dark??

[bleubeard]

I haven't been able to actually make this work.

As in the thread, I changed the rgba everything to 255,255,255,0 (white) for everything, and that didn't work.

I also kept the rgba as black (0,0,0,0), and lowered the last number to 0, and switched it to 0%, and that did work. Am I missing something? I would even be ok with removing the gradient at this point.

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

[bleubeard]

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

[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]

thanks!

[bleubeard]

Never mind... it's on the FTP in the images folder. (wp-content-Themes-Minimum-images)

[bleubeard]

Hey Jamie,

Did you ever figure this out?

[bleubeard]

cooool..... Thank you Pixelista!!! You're awesome!!!!

[Author]

Posts