Horizontal bars that stretch to fit

Get Started
1

Hi all - I’m terrible with code so need a little help.
I’m designing a site in Photoshop and need to have some bars in the background that stretch to fit any sized screen.

For example:

Can someone point me in the right direction as to how I can achieve this effect?

Thanks!

2

Welcome to Sitepoint, waylman.

by default, any block element : div, p, ul, ol, blockquote , etc. will stretch to fill the width of its parent element(always use the proper semantic element to wrap each part of your content).

What that means is any BLOCK child of a body element will do this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
				.center{margin:0 auto; width:960px;
						border-top: 5px solid pink;
						border-bottom: 5px solid pink;
				}
				.wrap{
						background:  #51f;
						border-top: 2px solid orange;
						border-bottom: 15px solid orange
				}
		</style>
	</head>
	<body>
<div class="wrap">
	<p class="center"><em>Am a centered paragraph of content </em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
	</body>
</html>

hope that helps

3

Thanks, very helpful!
I came across this little tool as well which does it in css

The problem I’m having is I dont know how to place content in the content wrapper. My content is just a bunch of sliced up images at this point.
Can someone help me out with that?

Much appreciated!

4

Here is a fairly simple description of how to build a page like that:

http://pageaffairs.com/code/layout-full-width-bands

The demo page is here: http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html

5

Thanks much…I’m playing around with a very simple method of doing this but it’s not working. I have bars.css, bars.html, and bars.png all in the same folder.
Can someone tell me what I’m missing here!?

HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<link href=“bars.css” rel=“stylesheet” type=“text/css” />

<title>Untitled Document</title>

</head>

<body>

</body>
</html>

CSS
body {
backgroung-color: #fff;
background-imgae: url(‘bars.png’);
background-repeat: repeat-x;
}

6

There’s no property called background-imGAe. :slight_smile: