/* Responsive Full Background Image Using CSS * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/ */ body { /* Location of the image */ background-image: url(file:///C|/Users/Winy/Downloads/responsive-full-background-image-master/responsive-full-background-image-master/images/background-photo.jpg); /* Image is centered vertically and horizontally at all times */ background-position: center center; /* Image doesn't repeat */ background-repeat: no-repeat; /* Makes the image fixed in the viewport so that it doesn't move when the content height is greater than the image height */ background-attachment: fixed; /* This is what makes the background image rescale based on its container's size */ background-size: cover; /* Pick a solid background color that will be displayed while the background image is loading */ background-color:#464646; /* SHORTHAND CSS NOTATION * background: url(background-photo.jpg) center center cover no-repeat fixed; */ } /* For mobile devices */ @media only screen and (max-width: 767px) { body { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(images/background-photo-mobile-devices.jpg); } } ----------------------------- .boxgroesse { width: 250px; height: 175px; } #box1 { background-color: red; position: absolute; top: 90px; left: 100px; } #box2 { background-color: green; position: absolute; top: 70px; left: 300px; } #box3 { background-color: blue; position: absolute; top: 210px; left: 200px; }