Menu icon Foundation
background-attachment: fixed;

Hi

Loving playing with this framework and how it fits beautifully with WordPress :)

One issue I have is with background-attachment: fixed;

I am creating sections where the background image / color go full width and break out of the container, all is good until you try and fix the background image, just doesn't seem to want to entertain this with Foundation.

Any ideas?

Cheers

/* The CSS */

.max-width-s1 {
    margin: 0 -500%;
  	padding: 0.5em 500%;
  	background: url("http://...slider-bg.jpg") repeat;
	background-attachment: fixed;
	background-position: center top;
  	overflow-x: hidden;
}
            
/* The HTML */

<div class="max-width-s1">
    <header>
        <h1>Improved full width browser bars</h1>
    </header>
    <p>This white area is a simple 960 wrapper</p>
</div>
         

backgroundfull width sections

Hi

Loving playing with this framework and how it fits beautifully with WordPress :)

One issue I have is with background-attachment: fixed;

I am creating sections where the background image / color go full width and break out of the container, all is good until you try and fix the background image, just doesn't seem to want to entertain this with Foundation.

Any ideas?

Cheers

/* The CSS */

.max-width-s1 {
    margin: 0 -500%;
  	padding: 0.5em 500%;
  	background: url("http://...slider-bg.jpg") repeat;
	background-attachment: fixed;
	background-position: center top;
  	overflow-x: hidden;
}
            
/* The HTML */

<div class="max-width-s1">
    <header>
        <h1>Improved full width browser bars</h1>
    </header>
    <p>This white area is a simple 960 wrapper</p>
</div>
         
Alexander Assimidis over 4 years ago

What are u tryin to do? Could u specifiy ur Problem. Another thing is if u use Tag then use the Tag too that's cleaner

Brandon Arnold over 4 years ago

I'd just build those elements outside of the grid.

/* The CSS */

header  {
    background: url("http://...slider-bg.jpg") repeat;
  background-attachment: fixed;
  background-position: center top;
    overflow-x: hidden;
}

/* The HTML */

<header>
  <div class="row">
    <div class="small-12 columns">
        <h1>Improved full width browser bars</h1>
        <p>This white area is a simple 960 wrapper</p>
     </div>
  </div>
</header>

Jeremy Englert over 4 years ago

Ran into this EXACT same issue yesterday. Are you using the Off-Canvas navigation by chance?

I was able to get it to work by switching to the regular top-bar navigation.

Jon Pedlow over 4 years ago

Hi Jeremy

Yes I am using off-canvas so will try switching. Thanks for the heads up :)

Will update here in a while.

Jon Pedlow over 4 years ago

Hi Brandon

I have created a WordPress theme so the page templates are wrapped with row so needed a way of pushing the background image outside of the row container.

I did created a page template with no container so it can be added in when needed for greater control but that would not be a good idea for when a client is using it.

Cheers

Lincoln mitchell over 4 years ago

Having the same issue but have committed to off-canvas.
So, any way of making this work with off-canvas?

Kim Wilson over 3 years ago

I am also looking for a way to make this work with off-canvas

Kim Wilson over 3 years ago

Found it. There is a good solution here: https://github.com/zurb/foundation/issues/3155

.off-canvas-wrap, .inner-wrap {
    @media (min-width: 768px) {
        -webkit-backface-visibility: visible; 
    }
}