Hi everyone,
I want to know how I can show the background image of the body section spread to 100% of the visitor’s full screen with CSS, which sizes would vary upon different monitor/screen sizes. Is this possible and am I clear in what I’m asking?
-Tyler
I believe that HTML5 and CSS3 has this capability. Check out W3schools.com’s section on HTML5/CSS3, particularly the background size attributes. i think this is the right place…
Well you could create a 5x5 (or something that small range) and tile it on the body to have it go across the entire viewport. Just make sure to repeat the image. Some images make it awkward to work with but that general technique should work well.
[FONT=Verdana]There are a couple of problems with what you’re asking for.
First – some browsers make a real pig’s ear of resizing images, and they come out looking pixellated, uneven and generally messy. That isn’t a look you want on your site. That’s why we always recommend getting your image the right size before uploading it onto your website, rather than putting it on at the wrong size and then using HTML (or CSS) to resize it ‘on the fly’.
Second – something to think about, are you wanting it to stretch to fit horizontally or vertically or to the larger of the two (keeping the same proportions), or are you wanting it to fill the page exactly, however much it has to distort it? Let’s say you have a background image that is 800×600px as a starting point. Someone has a screen of 1920×1080, with two windows side-by-side. That will give an available space of approx 940×1000. Do you want your image to scale to 1.175, so that it just fills the width (but leaves gaps top and bottom)? Or to 1.666 so that it fills the whole page (but you lose bits left and right)? Or do you want to change the aspect ratio from 1.333 to 0.94, making it 40% more stretched in one direction than the other, so that it exactly fits the page?
(I’m not saying any one of those decisions is better than any other … just that you do need to make that decision on what you mean by your question)[/FONT]
Yeah, I should also not use the whole photo because I need to lower the file size of the photograph. Then, I want the content to scroll over the middle white portion.
Good idea!
Then, I want the content to scroll over the middle white portion.
OK. You might just want to set your wrapper w/ a background-color and make that the “white portion”.
In general, I’d consider using a different background image or using a gradient to fade the image to a color that you can set as background-color.
~TehYoyo