How to make header background transparent

Resolved mrob09
(@mrob09)

10 years, 10 months ago

how can I make the header background transparent?
I’ve set the colour to white – which I want – but now want to make it transparent so you can see through to the banner.

Thanks

Viewing 15 replies - 1 through 15 (of 15 total)

Thread Starter mrob09
(@mrob09)

10 years, 10 months ago

actually, translucent, not transparent.
ab
(@maml)

10 years, 10 months ago
if you get rid of the colour value (#fff) in this line of code it should make it transparent when set to default, not sure about translucent
```
// Site title background
	$wp_customize->add_setting( 'site_infobg', array(
		'default'        => '#fff',
		'sanitize_callback' => 'puresimple_sanitize_hex_color',
```
ab
(@maml)

10 years, 10 months ago

actually i dont think that works, anybody else know how to fix this?

Chris Cook
(@cccamuseme)

10 years, 10 months ago

Replace (#fff) with this.

rbga (255, 255, 255, 0.2)

ab
(@maml)

10 years, 10 months ago

is there anyway to make the background transparent by using a custom css plugin?

I have the same problem as OP and I rather not change anything in the themes code
Chris Cook
(@cccamuseme)

10 years, 10 months ago
```
background: rbga (255, 255, 255, 0.2);
```
Using this code is the way to make a background color transparent. The best thing to do if you want to start customizing your site is to create a child theme and start editing using css.
ab
(@maml)

10 years, 10 months ago

can you give me step by step instructions of how to make the background transparent once a child theme is set up please?

ab
(@maml)

10 years, 10 months ago

never mind I’ve sorted it now

Theme Author Styled Themes
(@gejay)

10 years, 10 months ago

Hi mrob09 and Maml,

Did you got solution or not please let us know if you have any issue.

Thanks
ab
(@maml)

10 years, 10 months ago
Hi Styled themes

I was able to sort it by adding this code to the css
```
.site-info  {
    display: inline-block;
    padding: 15px 30px;
    background:none !important;
}
```
Thread Starter mrob09
(@mrob09)

10 years, 10 months ago

no, that code above has made it totally transparent. But I am just trying to make it translucent/faded.

any ideas?

Thread Starter mrob09
(@mrob09)

10 years, 10 months ago

and if I type:

.site-info {
display: inline-block;
padding: 15px 30px;
background: rbga (255, 255, 255, 0.2);
}

that doesn’t work either

Theme Author Styled Themes
(@gejay)

10 years, 10 months ago

Hi mrob09,

Could you please provide us link of your site, so that we could provide solution asap.

Thanks

Thread Starter mrob09
(@mrob09)

10 years, 10 months ago

http://www.layerandslice.com

so I just want the white background of the header to be translucent.

thanks
Chris Cook
(@cccamuseme)

10 years, 10 months ago
The code you have now is this
```
.site-info {
    display: inline-block;
    padding: 15px 30px;
    background: #fff;
}
```
Replace it with this and it will work.
```
.site-info {
    display: inline-block;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.8) !important;
}
```