How to stretch background image to fit screen?

by virtualmisc 6 replies
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.
#website design #background #fit #image #screen #stretch
Avatar of Unregistered
  • 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 }}
Avatar of Unregistered

Trending Topics

  • 1 {{ upvoteCount | shortNum }}

    What kind theme should use for WordPress site

    bestmarket nigeria in Web Design

    I have one year old website, lunch last year, I recently move from blogspot to WordPress. I need an advice on best WordPress theme for websites. My niche is on ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    How Do Marketers Consistently CRUSH the Leaderboards in Multiple Biz Opps At Once?

    sownsow in Internet Marketing

    I know there are some high level marketers in this forum so I hope to get some valuable responses to this thread. I've been involved in the biz opp niche ... [read more]

  • 148 {{ upvoteCount | shortNum }}

    Tons of Bad Advice In This Thread

    Most people that come to the forum are looking for advice on how to build their business or to otherwise make more money. Thanks to all those willing to help ... [read more]

  • 11 {{ upvoteCount | shortNum }}

    You Can't Be A Successful Entrepreneur ...

    Nonsense: Almost anyone can be successful at "IM". If anything — use those "negative comments" ... To motivate you into taking more action. : ) Jonathan P.S. Feel free to ... [read more]

  • 5 {{ upvoteCount | shortNum }}

    Are the WSO programs in the WSO section legit?

    Hello I am new to this forum and IM in general How legit are the programs being advertised and promoted in the WSO section of WF? How can I sift ... [read more]