how to resize a large background jpeg image in css?

Question

i'm stuck please help, tried everything, and nothing works!
50% of the image is being chopped along the edges.

Answer 1

In CSS 2.1, you must set a proper width/height of the container that is using the background image. Otherwise, the image will be cut off in whichever dimension is short.



In CSS 3.0, you can resize a background image, but not all browsers support CSS 3 yet.



Background Image Code:



For the body tag example:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) no-repeat center scroll;

}



That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.



For a tiled image, change to:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) repeat top left scroll;

}



Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".



Inline CSS example:

Inline CSS example:



Ron



Ron

Answer 2

You cannot resize it...



that is why in css you have repeat x, repeat y or no-repeat..



I am afraid if you want to resize it you have to do it in an image editing programme, but beware that people have different screen sizes, so what you cant currently see for example, others may be able to see, or vice-versa.



in css if you are using it as a background image only something like this will work



body ( background: url(http://mysite.com/images/background.jpg) no-repeat; )



no width or height attributes will work on css images

Answer 3

Re size the image to make it fit the page or div your putting it in. You fail to say if it is a page background or division bg. You can enlarge the division to the size of the image or use a photo program to re-size the image to fit the page or div. You can crop the image or resize but resizing may distort. The image and the container (page or div) must be the same size. Adjust one of the three, the container size, the image size, or crop the image. As long as width and height are the same.