Community Forums › Forums › Archived Forums › Design Tips and Tricks › Transparent footer in Altitude pro
Tagged: Altitude Pro, footer, transparent
- This topic has 4 replies, 2 voices, and was last updated 9 years, 1 month ago by stesod.
-
AuthorPosts
-
March 15, 2015 at 8:26 am #144457stesodParticipant
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/March 15, 2015 at 11:01 am #144472TonyaMemberHello, 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 BootcampMarch 16, 2015 at 5:11 am #144597stesodParticipantThanks 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 whatBoth 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
March 16, 2015 at 2:03 pm #144664TonyaMemberHi 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-footerThe 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 BootcampMarch 16, 2015 at 5:09 pm #144676stesodParticipanthi,
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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.