1

how can i set a fixed background and scroll in css??? and also ive been trying to set a background to cover all dimensions by i always end up with a blurry background :(

im relatively new at this so please dont judge me, this is my css: body #bg { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; background-attachment:fixed;
}

.stretch
{
width:100%;
height:100%;
background-attachment:fixed;
}    

1 Answer 1

1

Like this:

This oe is fixed, set body to 100% to make full screen: http://jsfiddle.net/X8Z2v/4/

This one is scrolling by: http://jsfiddle.net/X8Z2v/5/

 html, body {
        height:3000px;
        margin:0;
        padding:0;
    }
    .stretch {
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background-image: url(http://www.placehold.it/2000x1000);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: scroll;
    }

HTML

<div class="stretch"></div>
3
  • i want to be able to scroll and have the background not move at all, just the elements, all my elements position are set to absolute, and do you know how i can set the background like in the example you have without losing caption???
    – Jc23
    Mar 6, 2014 at 18:05
  • Do you want a background for the body on your page? That'll be this: jsfiddle.net/X8Z2v/6
    – Nico O
    Mar 6, 2014 at 18:07
  • whups. Gave the background image to <html> as well.... jsfiddle.net/X8Z2v/7
    – Nico O
    Mar 6, 2014 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.