[David Thompson]

I’d like to make my logo image faded / washed-out in order to make my header text pop more.  Can someone advise the css I would use?  Or, if you have other suggestions I would love to hear 🙂

Thank you.

[David Thompson]

sorry, that should say ‘header image’ not logo image

I’d really like to have the image somewhat opaque but only under the text if possible

[vako]

Hi David,

 

At first, thank you for choosing our theme and service.

Please share your website URL and we will check for possible solutions.

 

Kind Regards

[David Thompson]

https://www.reachinghappy.com

[vako]

Hi David,

 

Please navigate to Dashboard > Appearance > Customize > Additional CSS section add the following snippet:

.entry-header {

position: relative;

}

.entry-header:before {

content: “”;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.5); /* Adjust the opacity by modifying the last value (0.5 in this example) */

z-index: -1;

}

Kind Regards

[David Thompson]

thank you, but it doesn’t seem to change anything.

I tried increasing the value to 50 and -50, but nothing changes when published

[David Thompson]

I just tried a solution I found elsewhere, and it sort of works…
<p style=”background: white; margin: 0in 0in 12.0pt 0in;”><span style=”font-size: 13.0pt; font-family: ‘Arial’,sans-serif; color: #222222;”>In my Page-Header.php file, I added the following above all other div statements:</span></p>

<code style="font-kerning: auto; padding-bottom: 40px!important; max-width: 100%; border-radius: 0px; overflow: auto;"><span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"><div class="semi-white-bg"></span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"></div></span>

 
<p style=”background: white; margin: 0in 0in 12.0pt 0in;”><span style=”font-size: 13.0pt; font-family: ‘Arial’,sans-serif; color: #222222;”>Then added this CSS:</span></p>

<code style="font-kerning: auto; padding-bottom: 40px!important; max-width: 100%; border-radius: 0px; overflow: auto;"><span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">.semi-white-bg {</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">    background-color: rgba( 255,255,255, 0.5 );</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">    padding: 20px;</span>

<span style="color: #212529; border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">}</span>

This isn’t exactly what I want, as it makes the entire image opaque.

And, for some reason it does NOT apply on mobile browsers

 

Any advice would be very much appreciated

Thank you!

[vako]

Hi David,

 

Weird we tested on our end it worked, In order to assist we need to check your website from the back end, please install this 3rd party plugin “Temporary Login Without Password Plugin” which allows us to access your dashboard without sharing access details.

To better understand how the plugin works, please watch the video guide below: https://www.youtube.com/watch?v=EMu0e78OpJo

Please make sure to mark your reply as private to hide it from the public.

 

Kind Regards

[Author]

Posts