Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design
Register Blogs Social Groups CalendarHelp Desk

Reply
LinkBack Thread Tools
Unread 8th October 2009, 02:03 PM   #1
Active Warrior
 
Join Date: 2009
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to stretch background image to fit screen?

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.
virtualmisc is offline   Reply With Quote
Unread 8th October 2009, 06:58 PM   #2
Advanced Warrior
War Room Member
 
Join Date: 2008
Location: Escondido, CA. Becase San Marcos just wasn't hot enough.
Posts: 510
Thanks: 34
Thanked 59 Times in 58 Posts
Default Re: How to stretch background image to fit screen?

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.
Aronya is offline   Reply With Quote
Unread 10th October 2009, 02:08 AM   #3
Banned
War Room Member
 
andi_gt2005's Avatar
 
Join Date: 2006
Posts: 410
Thanks: 6
Thanked 168 Times in 40 Posts
Default Re: How to stretch background image to fit screen?

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).
andi_gt2005 is offline   Reply With Quote
Unread 11th October 2009, 01:16 PM   #4
mad
Active Warrior
 
Join Date: 2009
Posts: 33
Thanks: 0
Thanked 1 Time in 1 Post
Default Re: How to stretch background image to fit screen?

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

mad is offline   Reply With Quote
Unread 11th October 2009, 03:23 PM   #5
Warrior Member
 
Join Date: 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: How to stretch background image to fit screen?

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
nichoL is offline   Reply With Quote
Unread 13th October 2009, 09:46 PM   #6
Warrior Member
 
Join Date: 2009
Location: Providence, UT
Posts: 8
Thanks: 0
Thanked 1 Time in 1 Post
Default Re: How to stretch background image to fit screen?

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.

Utah web design - Bridgerland Web Development, LLC
Logan, Utah
SEO, web design, web programming, web hosting
bridgerlandweb is offline   Reply With Quote
Unread 14th October 2009, 02:17 AM   #7
Self Made Freelancer
War Room Member
 
blogginvixen's Avatar
 
Join Date: 2009
Location: ...right behind 'ya...AWWW...
Posts: 124
Thanks: 11
Thanked 34 Times in 18 Posts
Default Re: How to stretch background image to fit screen?

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.
blogginvixen is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design

Bookmarks

Tags
background, fit, image, screen, stretch

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 11:29 AM.