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: Enter image details here 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

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -