How to make the background image to fit into the whole page without repeating using plain css

Question

I have an JPG image with size 1024 x 724  My page size is not fixed  My requirement is  If I resize the page then the background image should also resize and fit to the page   Also I don t want to keep the image related information in my Html page JSP  I want to do this using plain CSS  I am not using CSS3  Because there is an attribute called background-size which can make the image stretch to the page width and height  Currently only Google Chrome supports this   Any help

User · Answer

These three line all together worked for me   background-image  url  pages images backImage png    background-size  100   background-repeat  no-repeat

User · Answer

try something like  background  url bgimage jpg  no-repeat  background-size  100

User · Answer

You can either use JavaScript or CSS3   JavaScript solution  Use an absolute positioned  lt img gt  tag and resize it on the page load and whenever the page resizes  Be careful of possible bugs when trying to get the page window size   CSS3 solution  Use the CSS3 background-size property  You might use either 100  100  or contain or cover  depending on how you want the image to resize  Of course  this only works on modern browsers

User · Answer

background url bgimage jpg  no-repeat  background-size  cover   This did the trick

User · Answer

You can t resize background images with CSS2   What you can do is have a container that resizes    lt div style  position absolute z-index 0 left 0 top 0 width 100  height 100   gt     lt img src  whatever jpg  style  width 100  height 100   alt        gt   lt  div gt    This way  the div will sit behind the page and take up the whole space  while resizing as needed   The img inside will automatically resize to fit the div

User · Answer

Depending on what kind of image you have  it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern  If you center the image in the page and have the solid color as the backgroud    See http   www webdesignerwall com trends 80-large-background-websites  for examples of sites using large or scalable backgrounds

[css] How to make the background image to fit into the whole page without repeating using plain css?

Examples related to css

Examples related to background-image