View Full Version : Repeating an image vertically

Mar 1st, 2009, 02:30 AM
I have a little squarish design that I want to have about 25% from the top on the users screen with blue going vertically from both the top and bottom of the design, scaling with varying resolutions...

How do I do that? I'm still quite a noob to HTML/CSS...

I did a bit of googling and found: <div style="background: url("images/repeattop.gif") repeat-y; width: 670px">

but it doesn't seem to work?

also, how would I make it so that the main sliced up content area is placed 25% from the top? (not exactly in the center, but not all the way up top)

Mar 1st, 2009, 03:13 AM
Hello commandercup,
Have you tried any code yet? It's hard to tell what you're after and doubly so without having your images...
Something like this may get you started?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
* {
margin: 0;
padding: 0;
border: none;
#wrap {
width: 80%;
height: 400px;
margin: 15% auto 0 auto;
background: #999;
overflow: auto;
<div id="wrap">
<!--end wrap--></div>

Mar 10th, 2009, 02:18 AM
well I haven't tried your code yet... but here is an image of what i mean.


I plan on slicing up an image like this... the blue bar represents where all the navigation links will be... while the right side (white) will represent the main content area...

I want the design to scale with the resolution of the visitor... how do I make it do that?

For Example: If I want the blue to fill up the entire left side of their browser window, and the white to fill up the entire right side (and for the white to scale with the content, so if there is more text then will fit on their screen, it'll start scrolling vertically) how do I do that?


Mar 10th, 2009, 02:45 AM
Ah, another full-height layout. I missed that when I read your first post so that code above does not do the full height. Seems like that's all anyone is doing lately, full height layouts.
Have a look at the bullet proof solution at http://nopeople.com/CSS/full-height-layout/index.html

You'll want that method with a full width layout and faux columns (http://nopeople.com/CSS/faux_columns/index.html)for your blue and white columns.

Mar 10th, 2009, 02:53 AM
ok thanks! :thumbsup: