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

**rbardo** · Feb 27, 2012 20:51

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.

**ralph.m** · Feb 27, 2012 22:42

Hi rbardo. Welcome to the forums.

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!

**rbardo** · Feb 28, 2012 07:44

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?

**ServerStorm** · Feb 28, 2012 09:08

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:

Code:

#background_section_one{
  ...
  width: 33%;
  background-image: url(images/bk_first.png);
  background-repeat: repeat; /* repeat both x and y and fill the space */
}

Steve

**ralph.m** · Feb 29, 2012 15:52

Originally Posted by rbardo

what exactly do you mean by slice?

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.

bg.png

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

Code:

<!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.

**rbardo** · Mar 5, 2012 10:31

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.

**Albablue89** · Mar 5, 2012 11:56

Originally Posted by rbardo

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.

Put all your contents inside a wrapper (container).

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

**ralph.m** · Mar 6, 2012 16:27

Originally Posted by rbardo

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.

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

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions