[Solved] Fixed Background within Container?

[MBM]

I have a container (not full page height) which uses a background image. Within the container I have a form. I want the form to scroll but the container to remain fixed. At the moment the form and container move.

body {
background:#ffff00;
font-family:'Economica', Arial, sans-serif;
font-style: normal;
font-weight: 400;
}

div.fixedcontainer {
background:url(http://clermontresidencesingapore.co/wp-content/uploads/2013/10/203-black-background-hole-dirty-wallpaper.jpg) top right no-repeat; background-position:fixed;
width:100%;
height:100%;
margin-top:40px;
}

/* Styles the form */
.createcard {
font-size:30px;
float:left;
border:solid 1px #d2d2d2;
padding:40px 5px 80px 0px;
width:1000px;
height:auto;
background-color:#ffffff;
color:#000000;
border:0px;
margin-top:50px;
margin-bottom:40px;
margin-left:420px;
}

http://codepen.io/Nullbreaker/pen/eJgsi

[Atelierbram]

I want the form to scroll but the container to remain fixed.

When you replace background-position:fixed; with position:fixed; and permit scrolling the container by adding overflow: auto;, then this will be ‘fixed‘ .

.fixedcontainer { 
 background: url(wallpaper.jpg) top right no-repeat;  
 /* background-position:fixed; */ 
 width:100%; 
 height:100%; 
 margin-top:40px;
 background-attachment: fixed;
 position: fixed;
 top: 0;
 left: 0;
 overflow: auto;
}

background-attachment: fixed, prevents the background-image from scrolling with the content. When you don’t want this; remove it, for the default behaviour of background-images is to scroll.

Nice resource on CSS positioning

[MBM]

Thank you.

[Author]

Posts