Hi everyone!
For starters here is my forum
www. swimbikerun.ph/smf/index.php
I just switched to a bigger monitor and noticed that my background width is only to a certain part of the forum.
Didn't realize that before as I was using a smaller monitor with smaller resolution
My question is how can I stretch the image horizontally?
I current have this code.
/* The main body of the entire forum. */
body
{
background: url(http://swimbikerun.ph/wp/wp-content/uploads/2011/01/CarbonFiber21.jpg) repeat-x #CDD1D6;
background-repeat:repeat-y;
margin: 0px;
padding: 12px 30px 4px 30px;
If I put in background-repeat:repeat-x; the image does stretch all the way to the other side of the screen but the background gets cut midway down the forum.
How can i stretch it both vertically and horizontally?
Thanks everyone would appreciate any help
http://css-tricks.com/3458-perfect-full-page-background-image/ ;)
wow thanks! that solved it :) I used the Awesome, Easy, Progressive CSS3 Way :) :) :)
What happens when a browser does not support CSS3? In such a case, you would have to "float" a 100% x 100% image above the page background, and raise all other content above it via CSS z-index = 10. Note that a "background" image thus scaled to fit the window will look ugly when stretched to a different aspect ratio.
You should consider centering the image in the window (using background positioning CSS), above a suitable background color. Or, repeat the image to repeat horizontally, vertically, or both (tile), again with a suitable background color if the image is too small to completely fill the screen. This will work with all browsers.
Yeah but that tends to look like crap too. Tiling an image that isn't meant to be tiled (like a scene, for instance) when the screen gets too big is one of the most amateurish looks ever. Ditto for it suddenly being bordered with "a suitable background colour". Frankly a lot of people aren't caring any more about browsers that don't support CSS3.
I've seen demos of the css stretching and as long as you are using a good quality image of a reasonable size it looks fine (meaning don' try to scale a 1024 image up to 1920). There are also jQuery solutions that do the same job, with or without slideshow, and some of those are very good.