How to properly stretch a background so it occupies the entire screen?

HTML & CSS
1

I’m new at developing websites, and I’m kind of stuck on a background layout. Can someone fill me in on how to have multiple colors in the background stretch
the entire screen width? Please take a look at this site: www.realtrainingandfitness.com . You’ll notice that it takes forever to load because all those color variations (the top black header, the middle silver content area, and the silver footer area) are one big image. I want to break them out into their respective containers but I’m not sure how to get them all to stretch the screen. Any help would be greatly appreciated.

2

Hi rbardo. Welcome to the forums. :slight_smile:

If you were prepared to do away with the photo in the background, you could do a very narrow slice of this image and set it to repeat across the screen. If you want the photo, you still should do that slice, and add in the photo separately, as a background image on the section it occupies.

An alternative is to break the page into sections, each with its own repeated background image.

The image in the site you linked to is way too large and grossly inefficient, so it’s good that you are looking for an alternative! :slight_smile:

3

Hey ralph.m. Thank you for the reply. I really appreciate the constructive criticism. This may sound like a stupid question, but what exactly do you mean by slice? I design my sites’ in Fireworks. While I’m coding I just go into fireworks, grab the image I need, and save it as a .png in the root folder. Is that slicing? And for some reason I can’t get the middle content background to repeat. any suggestions?

4

[SIZE=3][FONT=trebuchet ms]Hi rbardo,

Say your image in Fireworks, you select a 5 pixel by 5 pixel block. Copy that and save to a new bk_first.png file. Then in CSS you do something like:[/FONT][/SIZE]


[FONT=trebuchet ms][SIZE=3]#background_section_one{
  ...
  width: 33%;
  background-image: url(images/bk_first.png);
  background-repeat: repeat; /* repeat both x and y and fill the space */
}[/SIZE][/FONT]

Steve

5

What ServerStorm said, although in this case, because the bg image has various colors going down the page, you could crop it to the full height an, say, 10px wide. Then you can set it to repeat across the screen (repeat-x). It’s better to do it this way when you have an image that doesn’t vary horizontally. That is, a 10px wide slice contains everything that the full width image does. So you end up with a tiny image pixel-wise and et the browser do the work of displaying it across the screen.

A very rough example (from a screen shot) is attached.

If you save that image to your desktop and then open a .html file on your desktop with this code it it


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
  body {background: url(bg.png) repeat-x;}
</style>
	
</head>
<body>
</body>
</html>

You’ll see how the image repeats across the screen. It’s not perfect, because the image slice I took doesn’t tile well, but you get the idea.

6

Man, I’ll tell you what, you guys have been a tremendous help. I did what you said, and wow! What a difference. I should have been in this forum asking questions a long time ago. Thanks guys, I really appreciate it.

7

Put all your contents inside a wrapper (container).

Your middle wrapper, grey part is floating left relative to the browser.

8

Glad we could help! Hope we see you again soon. :slight_smile:

9