Footer & Transparent Background :-)

[lionelbonnaz]

Hello,

My footer doesn't want to be "transparent" on https://lionelbonnaz.com/category/motion

Here is my code :

/* site title — categorie motion /
body.slug-motion .sitetitle.txt .sitetitle-txt-inner span{
color: white;
}
/ site title mouseover — categorie motion */
body.slug-motion .sitetitle.txt:hover .sitetitle-txt-inner span{
color: white;
border-bottom-color: white;
}

/* navigation — categorie motion /
body.slug-motion nav.primary a{
color: white;
}
/ navigation mouseover — categorie motion /
body.slug-motion nav.primary a:hover{
color: white;
}
/ navigation mouseover underline color — categorie motion */
body.slug-motion nav.primary a:hover span{
border-bottom-color: white;
}

/* footer background */
#footer-region{
background-color: transparent;
}

What can I do ? thanks :bread:

PS : my footer contain a page with transparent color background.

UP :(

[mariusjopen]

Hi Lionel,

I cannot really imagine how it should look like but here is the trick to do things transparent:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba

https://css-tricks.com/rgba-browser-support/

If you have more questions, let me know!

Best!

Marius

[lionelbonnaz]

Hello Marius !

thank you so much ! But your answer doesn't resolve the issue ... The background of my footer keeps white :-)

[mariusjopen]

Hi Lionel!

Somehow I cannot open your website.

Can you check if it works?

Best!

Marius

[lionelbonnaz]

HELLO ! it's very strange ... you can't open my website ? Hum. Dont know why ...

What I want : when you click on motion the footer is grey, and when you click on design, go back to white ..

PS : no, it does not work :(

[mariusjopen]

Hi Lionel,

maybe it was because of my internet connection. Your site works now.

The footer is the white part where Twitter etc is written. You want this for example transparent yellow or something?

Can you attach a quick Photoshop sketch that I understand what you mean?

Best!

Marius

[lionelbonnaz]

You right ! That is exactly what I want :) the footer (the white part) = the same color like motion or design etc when I navigate through menu.

[mariusjopen]

Hi Lionel,

your website only shows "hello". A bit difficult to look into the code :-)

Is this on purpose?

Best!

Marius

[lionelbonnaz]

sorry :) fixed ! you can see my code :)

[mariusjopen]

Hi Lionel,

with Custom CSS you can make the footer transparent:

#footer-region {
    opacity: 0.3;
}

Let me know if that worked for you.

Best!

Marius

[mrrpringle]

Hi Marius,

Curious how I can just get rid of the white background on my footer. I tried opacity, but that just makes everything either very light or disappear.

Would like to use css to have a transparent background of my footer but have the typography remain at 100% opacity.

[mrrpringle]

update: resolved!

use:
background: none !important;

Cheers!

[mariusjopen]

Dear @mrrpringle
great! Thank you for sharing your solution.

Best!

Marius

[walshmagger]

@mrrpringle said in Footer & Transparent Background :-):

use:
background: none !important;

In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon. Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

In CSS, there is no property such as transparancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparent is opacity and it is a part of the W3C CSS3 recommendation.

div
{
opacity: 0.6;
}

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

[mariusjopen]

Dear @walshmagger
thank you for the great answer!

Marius