Adrián Vázquez Adrián Vázquez - 4 days ago 6
CSS Question

Responsive background with a long height image

I have a really long image, 2263 x 8192 pixels. I would like to create a website with a background (of that image) that covers the width of the window, but also with the full height of the image, without losing responsiveness.

The idea is to have this long scrolling image, divided in different/sections parts with a fix height. Exactly as a landing page with different sections, but instead of having different backgrounds for each section, I want a long image.

Any ideas?

Answer
body {
    width: 100%;
    height: 100%;
    background: url('http://i.imgur.com/WfkIpCq.jpg') no-repeat;
    background-size: cover; 
    color: #fff;
}

JSFiddle https://jsfiddle.net/f1zu318n/

Comments