Html:stretching A Background To Page

Spartan0510 · #1 (**permalink**) Nov 9th, 2007, 00:58

I am having to make a site and I need it so the background stays the same size as the monitor resolution and so it doesn't tile it self.

<HTML>
<HEAD>
<TITLE>Welcome to the wood shop safety test</TITLE>
</HEAD>
<BODY background="cherry3.jpg">
</body>
</html>

ScottR · #2 (**permalink**) Nov 9th, 2007, 01:21

Use css with background-attachment, background-position, and background-repeat. All of which can be controlled with one background element.

body {
background: color image repeat attachment position;
}

Make sure attachment is fixed. This will not stretch the background. But it will remain the same regardless of resolution.

Good Luck,
Scott

Spartan0510 · #3 (**permalink**) Nov 9th, 2007, 01:35

I dont really understand what you provided me can you explain what to do with that. Thank you.

ScottR · #4 (**permalink**) Nov 9th, 2007, 01:43

I'm going to assume that you don't know CSS as send you here.

Or do a search for CSS and study a bit. CSS is Cascading Style Sheets and is used for defining the presentation of the content on your site. I would suggest a few tutorials, css can be a bit confusing at first.

Good Luck,
Scott

Lucleonhart · #5 (**permalink**) Nov 9th, 2007, 07:40

If you do not want the background to be tiled, you can simple add the no-repeat value.
If you want the background to stay at it's place, and do not scroll with the page, you need the attachment:fixed; attribute that was mentioned above.

HTML: Select all

<body style="background:cherry3.jpg no-repeat fixed top left">

That will display your background one time at the left top of the window, and it will stay there when you scroll down.

If you want to stretch the background to full screen, you have to use some divs

HTML: Select all

<body>
<div style='position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1;'>
  <img src='cherry3.jpg' style='width:100%; height:100%;'>
</div>
<div style='position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:scroll; z-index:2;'>
  PUT ALL YOUR BODY CONTENT HERE!
</div>
</body>

karinne · #6 (**permalink**) Nov 9th, 2007, 15:11

This thread might be of some help ... see posts by Aerospace_Eng

cbaker55 · #7 (**permalink**) Nov 9th, 2007, 21:08

You say you want the background to stay the same size according to the monitor resolution?
Set the size so that it isn't in pixels, and make it a percentage, for example, 100% to make the background fill up the entire screen no matter what resolution the computers are running.

ScottR · #8 (**permalink**) Nov 11th, 2007, 00:10

Quote:

Originally Posted by cbaker55

You say you want the background to stay the same size according to the monitor resolution?
Set the size so that it isn't in pixels, and make it a percentage, for example, 100% to make the background fill up the entire screen no matter what resolution the computers are running.

Have you tried that? It seems it would stretch the image and distort it big time. Unless the image is a gigantic!

Stuart · #9 (**permalink**) Nov 12th, 2007, 03:17

Quote:

Originally Posted by ScottR

Have you tried that? It seems it would stretch the image and distort it big time. Unless the image is a gigantic!

Yes, that will happen, especially if the resolution is crazy and weird (like mine). That might not be, and probably is not, the desired effect...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Linking to an html page	rusty149	Web Page Design	1	Feb 4th, 2008 10:34
.swf file as HTML table background	bubberz	Flash & Multimedia Forum	9	Jun 18th, 2007 21:45
Background page not showing up	aaronh	Web Page Design	4	Apr 30th, 2007 19:30
Repeating an image along the bottom of the page without setting it as background.	imagius	Web Page Design	9	Apr 27th, 2007 08:35
Open xml in new html page	kingfrank	JavaScript Forum	3	Apr 4th, 2007 11:26

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Html:stretching A Background To Page