Many of the one page websites I have come across have multiple images for their div sections. They have an image at the top that fits the entire height and width of the browser, then upon scrolling the next image does the same. I'm trying to achieve this with following code:
CSS:
.main {
background-image: url("pg2background.jpg");
background-repeat:no-repeat;
background-position:right top;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
}
HTML:
<div class="main">
</div>
Don't know what's wrong. Its not working.