Header transparency - make header transparent for Travelify theme

Travelify
1

Hello Aigars or Movin,

Question i wanted to change the background of the header image in to tranparent, I found this code in this forum bud it is not working:

#main {
background: #f8f8f8;
}
.wrapper {
background-color: transparent;
}
#branding {
background: rgba(255,255,255,0.3);
}

If you look at my go daddy staging website “http://695.3f4.myftpupload.com/” you see a header pic with a flying Ara. What i wanted is to remove the white area and led the background image blend in.
Can you tell me how to do this

Thanks an hope to hear from you soon.

The header pic is a gif with a tranparency background.

WIMA

2

I forgot i don’t want anything to change with my footer widget area and the wrapper with the copy right text only the background behind the Parot must be transparent.

Regards

WIMA

3

Hi WIMA,

I hope you are well today and thank you for your question.

You can achieve this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

div.wrapper {
  background: transparent;
  -webkit-box-shadow: 0 158px 2px rgba(0, 0, 0, 0.2);	
  box-shadow: 0 158px 1px rgba(0, 0, 0, 0.2);
}

#footerarea{
	background: #fff;
  border-radius: 0 0 4px 4px;
}

Best Regards,
Movin

4

Hello Movin,

I put the code in the CSS of my website https://info-suriname.com/ when you look at it you will see that on the leftside there is some transparency. When you look at the right side of the header (were the ARA flies) you see almost no transparency. Is there a way to adjust it so it blends in to the background image in ohter words I need more transparency of the header area.

Best Regards

WIMA

5

Hi WIMA,

It was working fine for me when i tested it but now i found you have added the following CSS code in the style.css file of your Travelify Child theme which removes header transparency.

#branding {
background: rgba(255,255,255,0.3);
}

To make the header fully transparent you can either remove the above CSS code or add the following CSS code in the style.css file of your child theme.

header#branding {
  background: transparent;
}

Cheers,
Movin

6

Mr. Movin and Mr Aigars,

Thank you verry much as you can see it works like a charme

Regards

WIMA

7

You are most welcome here :slight_smile: