18 {{ upvoteCount | shortNum }}
18 {{ upvoteCount | shortNum }}

How to stretch background image to fit screen?

by virtualmisc
6 replies
  • WEB DESIGN
    • |
I need to figure out how to make a background picture completely fill the screen with the full picture on any computer
screen. Weather it's being viewed on a 17 inch monitor or a 12 inch monitor I need the picture in the background to be
the same size. I've tried manipulating the size of the picture in photoshop but that doesn't work as well.
#background #fit #image #screen #stretch
  • Profile picture of the author Aronya
    You don't want to stretch. You want to shrink. A large image will look fine when reduced in size, but a small image will pixelize & look like crap if stretched. Problem is, how big an image do you have to start with? What happens when I hit your page with a 22" screen?

    Answer: design your page with specific maximum dimensions, and use an image that fits.
    {{ DiscussionBoard.errors[1259590].message }}
    • Profile picture of the author andi_gt2005
      Did you downloaded the image you want to use as a background from another site?

      Because if you did and that site uses CSS it will be hard to do it.

      But in general using a picture as the background lowers the conversion. You'll have to test which version is best: an image as the background or a normal background (like light blue for example).
      {{ DiscussionBoard.errors[1263893].message }}
  • Profile picture of the author mad
    Never use a picture for your website it slow down the speed of loading of your site and doesn't look same on different resolutions. Use background images for that aim
    {{ DiscussionBoard.errors[1267881].message }}
  • Profile picture of the author nichoL
    You should go fluid, meaning that you will have to control pictures sizes in percentage (width="100%" height="100%"), so that your image could fit any screen resolution
    {{ DiscussionBoard.errors[1268204].message }}
  • Profile picture of the author bridgerlandweb
    You can't resize a CSS background image; you have to use an <img> tag.

    It depends on your image. If your image is rectangular, about the same length:width ratio as a computer screen, and still looks good if stretched or squished a bit on different sized screens, then use:
    <img src="myimage.jpg" style="position:absolute; top:0; left:0; width:100%; height:100%" />

    You can omit the "height:100%" part if you want to keep the length:width ratio the same as the original. In this case, if your web page is small enough not to need scroll bars, use "overflow:hidden" to hide the part of the image that is offscreen.
    {{ DiscussionBoard.errors[1276264].message }}
  • Profile picture of the author blogginvixen
    A great resource I've found is WebDesignerWall's guide to creating websites with large background images: How to: CSS Large Background

    It's a great resource for understanding how to code according to different screen resolutions. There are even some demo templates to play around with at the end of the article. I hope that helps.
    {{ DiscussionBoard.errors[1276830].message }}

Trending Topics