Footer & Transparent Background :-)

[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