Transparent footer in Altitude pro

[stesod]

Hi,

I try to get the site footer transparent in relations to background image like this.

.site-footer {
background-color: transparent;
padding: 20px;
text-align: center;
z-index: 4;
}

But it shows the body color even if I added z-index (also tried 999).

what's wrong here?

cheerStephan

http://soderbergphotography.com/

[Tonya]

Hello, Stephan,

Revised:

With Altitude Pro, the background images are anchored to each section. The section that is above the footer is #front-page-7 ( you can search for it in the HTML DOM using Google Chrome or Firefox Firebug Dev Tools ). These sections are contained with the parent div .site-inner, whereas your footer container is the next div (outside of .site-inner). What this means is the background images do not extend down into the footer container. This is why setting the footer background to transparency yields the default of white.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[stesod]

Thanks Tonya, Yea i always use dev tools 😉

Can't find any #front-page-7 but well in .front-page-1 in the head as a style tag :
<style id='altitude-pro-theme-inline-css' type='text/css'>
.front-page-1 { background-image: url(//soderbergphotography.com/wp-content/uploads/2015/03/bg.jpg); }
</style>

That's the thing, where are the background image anchored? not so obvious.
Cuz my logic tells me background img is in the site-container div or body or what

Both header and footer resides inside site-container and header have a z-index set to 999 and footer (of course are under site-inner) hence footer should behave the same as header when added a z-index to it.

Got this mail from "you":
"It will depend upon what the background image is anchored to within the DOM and CSS. Are you able to open up your site for review, as it's in maintenance (or staging) mode at the moment preventing me to looking at it? "

Strange, the site was and are open 😉 (?)

Thanks for the input 🙂

/S

[Tonya]

Hi Stephane,

I see that the home page is different from yesterday ( or I'm losing my mind LOL ). Ok, your background image is attached to .front-page-1, which is contained within .site-inner. In Dev Tools, notice the HTML structure,

.site-header
.site-inner
.content-sidebar-wrap
.content
.front-page-1
.site-footer

The image is attached to .front-page-1. You can see this in Dev Tools when you click on .front-page-1 and then look in the CSS panel on the right: .front-page-1 { background-image: url(//soderbergphotography.com/wp-content/uploads/2015/03/bg.jpg); }. The styling for this container is then in the style.css file on line 1302 (which is the 3rd styling panel down on the right in Dev Tools).

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

.front-page-1 {
	position: relative;
}

.front-page-1 .image-section {
	padding-top: 75px;
}

Now the background-size is set to cover. It will "cover" (or fill the entire space) for this container. Because .site-footer is a separate parent container, it does not get the styling from .front-page-1.

If you want the image to fill the entire page and not just that section, you would have to change the image to anchor to the level above .site-header, .site-inner, and .site-footer, which could be .site-container or body. Then you could have the footer as transparent. Doing this however limits your page to one full screen background image.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[stesod]

hi,

Thank you for your well articulated answer. The vertical hierarchy is a bit new evolution for me. 🙂 I always by default assumed it was a nested hierarchy and when it confuses me when site-header get transparent but not the site-footer. When they are on the same nested level.

I must get some sleep now, thanks again!
There must be a way to come around this dilemma. . .

cheers,
Stephan

[Author]

Posts