Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove darkening gradient effect on Altitude background image
Tagged: Altitude Pro
- This topic has 8 replies, 3 voices, and was last updated 7 years, 9 months ago by Brad Dalton.
-
AuthorPosts
-
July 14, 2016 at 5:59 pm #189506jmgroupMember
I would like to remove the darkening scroll effect on the Featured Background Image 1
on the Altitude theme.Could you please show me how to do this? Many thanks.
Marcia Coffey
http://www.harrisonstone.com/new/July 14, 2016 at 7:31 pm #189508Brad DaltonParticipantJuly 14, 2016 at 8:08 pm #189509jmgroupMemberJuly 14, 2016 at 8:17 pm #189510Brad DaltonParticipantChange this on line 1249:
.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%; }
To this:
.front-page-3 .image-section, .front-page-5 .image-section, .front-page-7 .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%; }
July 15, 2016 at 5:24 am #189524jmgroupMemberHi Brad,
Thank you for this. But, when I just add the new code you sent me to my custom style sheet,
no changes are made on the site. Am I missing something?Marcia
July 15, 2016 at 10:51 am #189540detroitwidgetMemberMarcia,
On or about CSS line 1316, change this:
.front-page-1 .image-section { padding-top: 75px; }
To this:
.front-page-1 .image-section { padding-top: 75px; background-image: none; }
This won't remove your background image, but should override the background gradient overlay.
Example here:
I hope this helps.
July 15, 2016 at 11:08 am #189542Brad DaltonParticipantJuly 16, 2016 at 5:49 am #189587jmgroupMemberGood morning Brad,
Thank you kindly for the latest code. It worked PERFECTLY!
Best regards,
MarciaJuly 16, 2016 at 5:53 am #189588Brad DaltonParticipant -
AuthorPosts
- The topic ‘Remove darkening gradient effect on Altitude background image’ is closed to new replies.