Odd one this, but I want to have 2 backgrounds on a web page, the first one I want to stay at the top (so scroll in the normal way) and once you scroll, you get the 2nd background.
the 1st background i want to cover the width of the page (so i've used 'cover') the 2nd background I want to continually repeat. I've tried messing around with the code various ways, here's my code at the moment (which has the 1st bg static, so the 2nd bg is never seen at the moment! Grumble....)
background-image: url(http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg); url(http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg);
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
}
The reason I have it fixed is because I make it scroll, auto, or otherwise, the image stretches (because the image is wider than a browser so it can scale up/down on other devices... eventually lol)
Thanks! Scott
Is this the kind of thing you're trying to do?:
html, body{
width:100%;
height:100%;
margin:0px;
background-image:url('http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg');
background-position: center top, center center;
background-attachment: fixed;
background-color:#464646;
}
#div1{
background-image: url('http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg');
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width:100%;
height:100%;
}
<div id="div1"></div>
This essentially overlays the top of the page with a div covering the full width and height of the window which then scrolls with the page.