I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body {background-image:url(../IMAGES/background.jpg);}
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg); background-repeat:no-repeat; background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
background: url(../IMAGES/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
For more information , follow this Perfect Full Page Background Image !!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With