Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove Colour Fade on home page header images?
Tagged: Altitude Pro
- This topic has 6 replies, 2 voices, and was last updated 6 years ago by mattbrabner.
-
AuthorPosts
-
March 27, 2018 at 3:56 pm #218375mattbrabnerMember
Hi - is there a way to remove or reduce the darkness of the colour fade over the home page header images in Altitude Pro?
https://osteopathbrightonhove.co.uk
Many thanks
Matt
https://osteopathbrightonhove.co.ukMarch 28, 2018 at 12:28 am #218390Brad DaltonParticipantInspect the element and modify the CSS rule to change the darkness https://victorfont.com/how-to-use-your-browsers-inspect-tool/
March 29, 2018 at 8:54 am #218425mattbrabnerMemberHi
Thanks Brad. I am a novice though and was hoping to only use the 'additional CSS' in customise as I don't have child theme set up - any ideas where there may be seem CSS snippets for this that can be used in additional css section?
Thanks
Matt
March 29, 2018 at 9:28 am #218427Brad DaltonParticipantHi Matt
Altitude Pro is a child theme.
If you inspect the elements for the front page 1 section you'll find the image-section div in the HTML source
<div class="image-section">
You'll find the following CSS rule which you can modify :
.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%; }
March 29, 2018 at 9:35 am #218428Brad DaltonParticipantHi Matt
Altitude Pro is a child theme.
If you inspect the elements for the front page 1 section you'll find the image-section div in the HTML source div class="image-section"
You'll find the following CSS rule which you can modify :
.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%; }
April 9, 2018 at 5:21 am #218792Brad DaltonParticipantApril 9, 2018 at 5:48 am #218793mattbrabnerMemberHi
Apologies I thought I had closed this last week - will do again - all OK and thanks for your help
Matt
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.