- This topic is empty.
-
AuthorPosts
-
September 19, 2013 at 4:23 am #150570peterbrParticipant
Hello I have read the post Perfect Full Page Background Image and I like to create a full background that scrolls with the text like http://www.august.com.au
At the moment I am using technique #1 I tried to set the position: absolute; but then it’s scrolls on larges screen where there is no content and overflow: hidden; doesn’t solves it.
Anyone a idea?
img.bg { /* Set rules to fill background */ min-height:100%; min-width:1024px; /* Set up proportionate scaling */ width:100%; height:auto; /* Set up positioning */ position: absolute; overflow: hidden; top:0; left:0; } @media screen and (max-width:1024px) { /* Specific to this particular image */ img.bg { left:50%; margin-left: -512px; /* 50% */ } }
September 19, 2013 at 4:45 am #150571Paulie_DMemberWe’d need to see what you have so far.
As for the http://www.august.com.au image, that image is HUGE and cheats because it’s not a full page image.
It’s actually positioned at the top of the page and then the bottom of the image color matches the background of the site.
Oh…and it’s done by JS.
September 21, 2013 at 6:55 am #150849peterbrParticipantI have tried to set the img.bg to position: absolute; http://jsfiddle.net/piggybattery/9QzmS/2/ but then it gives a horizontal scrollbar.
It does matter if the image matches the background color of the body.
I rather have a fit for the common resolutions 1366×768 and 1920×1080 then a strange distorted.
By example if I view a background image form 1024x 683 at a viewport 1280×868 it displays a nice proportion
But with a viewport of 1920×858September 21, 2013 at 8:46 am #150856Paulie_DMemberWhat I meant was put image as a bg of the body….but you have to start with a REALLY big image.
September 28, 2013 at 9:36 am #151586peterbrParticipantThank you, that was what I were looking for
September 28, 2013 at 10:31 am #151587tomasz86ParticipantJust in case you’re interested, here’s an alternative way to achieve similar result by actually using the IMG tag:
http://codepen.io/tomasz86/pen/EpGLq
It may be useful when better cross-browser compatibility is required since this one works even in IE6.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.