html - 960px container but full width header/footer up/under the full screen bg image -
I am using a Drupal website and Vegas full screen BG. I want to receive the following: But I have a problem with the footer: I It should always appear beneath the background image (so you have to scroll down to see the footer) Now it's coming to the background image. Besides, I like the main menu and footer for the full width and as the container Do not want 960px. But I can not get these 2 containers to 'break out'
I have now:
#footer {status: full; Bottom: 0; Width: 100%; Height: 100px; Background color: # 202020; } # Primary-menu bar {status: Completed; Width: 100%; Height: 60px; Padding: 0; Margin: 0; Background color: RGBA (255, 255, 255,0.70); Padding-top: 10px; } Normally it does something like this, but I'm struggling to get this right ...
Any advice or solution?
You have not displayed any HTML HTML If the footer itself appears only when you scroll down, then you should have any type of cover for both your header and your content element. You can then set the cover + minimum-height to 100% for a full-screen image background and background-image / background-size HTML: & lt; Div class = "wrapper" & gt; & Lt; Header class = "page-head" role = "banner" & gt; Header & lt; / Header & gt; & Lt; Main square = "main" role = "main" & gt; Content & lt; / Main & gt; & Lt; / Div & gt; & Lt; Footer class = "page-foot" role = "contentinfo" & gt; Footer & lt; / Footer & gt; CSS: html, body {height: 100%; }. Wiper {min-height: 100%; Background-image: url (http://placehold.it/1200x800); Background-condition: center center; Background size: cover; }. Page-head {background: red; }. Men {Width: 80%; Margin: 0 auto; Background: yellow; }. Page-foot {background: blue; } See examples on this.
Comments
Post a Comment