PDA

View Full Version : [RESOLVED] Use imagerepeat rather than big image.

Foostaple
09-30-2007, 04:19 PM
http://www.freewebs.com/maxpowerbtch

If you look at it, I have 2 giant bars going on the left and right side which are just big images. Now instead of just having one big image is there any way I can just have it 1 image thats like 1 or 2 px in height but the same width.. repeat itself down the same length?


<html>
<head>
<style type="text/css">

body {
margin-top: 0px;
}

#wrapper {
background-color: #fff;
width: 800px;
height: 1000px;
overflow: auto;

}

.bannerwrapper {
padding-top: 10px;
}

.banner {
border: 1px solid #000;
width: 700px;

}

.menu {
padding:5px;
}

.menu a {

font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
padding:10px;
text-decoration:none;
color: #000;
}

.menu a:hover {
color:#c0c0c0;
}

.menu a:active {

color:#c0c0c0;
}

.contentwrapper {
width: 700px;
height: 500px;
border: 1px solid #000;
}

.content {
width: 680px;
height: 490px;
border: 1px solid #000;
border-top: 1px;
background-color: #fff;
margin: 0 10px 10px 10px;

}

.contentimage {
border: 1px solid #000;
border-bottom: 0px;
width: 700px;
}

</style>
</head>

<body bgcolor="c0c0c0">
<center>
<div id="wrapper">
<img src="bar.jpg" align="left">
<img src="bar.jpg" align="right">
<div class="bannerwrapper">
<div class="banner"><img src="banner.jpg"></div>

</div>
<div class="menu">
<a href="Home.html">Home Page</a> |
<a href="Home.html">About Us</a> |
<a href="Home.html">Staff</a> |
<a href="Home.html">Members</a> |
<a href="Home.html">Forum</a> |
<a href="Home.html">Links</a>

</div>
<div class="contentimage"><img src="content.jpg"></div>
<div class="contentwrapper">
<div class="content">Content will go here</div>
</div>
</div>

<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script></body>
</html>
Pegasus
09-30-2007, 04:31 PM
Being that it's one colour, you could just have that as the background to the page and use padding or margins to separate your sections.

Peg
Foostaple
09-30-2007, 06:54 PM
Oh it wont be one color, its will be like lighter on one side, then darker on the other or some kind of image. Sorry for not clarifying that
Pegasus
09-30-2007, 07:02 PM
You should be able to make a 1px high image and just tile it down... repeat-y.
Foostaple
09-30-2007, 09:51 PM
So would I keep this?

<img src="bar.jpg" align="left">
<img src="bar.jpg" align="right">

But where would I put repeat-y? And how would I make it so it repeats say 1000 times or 100% down the page
Pegasus
09-30-2007, 11:03 PM
Sort of. You'd make an image one pixel high and however the minimum width of the page wide. That image would be your vertical gradient. Call it fullbar.jpg.

Then you change the body part of the CSS to look like this:

body {margin: 0px; padding: 0px; background-image: url("fullbar.jpg"); background-repeat: repeat-y; }

The url for the image would be just as if you were calling up the image onto the page as you did before.

Am I making sense to you?
Foostaple
10-01-2007, 05:20 PM
Kind of. But wouldn't that make the hole background the repeated image? And I would need it to repeat twice, downwards. And I already have the background set as a colour.

Sorry I haven't done this in along time
Pegasus
10-01-2007, 05:37 PM
If you use repeat-y, it will automatically repeat downwards as many times as it's needed.
Foostaple
10-01-2007, 08:22 PM
Oh sweet. Ok I got the image repeating on the left side.. it looks just like it did with the giant image. Now how do I get the same thing but on the right side of the "wrapper" to.

Thanks for all the help so far, youve helped me out alot.

Updated Code

<html>
<head>
<style type="text/css">


body {
margin: 0px;
padding: 0px;
}

#wrapper {
background-color: #cc9966;
width: 800px;
height: 1000px;
overflow: auto;
background-image: url("bar.jpg");
background-repeat:
repeat-y;

}

.bannerwrapper {
padding-top: 10px;
}

.banner {
border: 1px solid #000;
width: 700px;

}

.menu {
padding:5px;
}

.menu a {

font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
padding:10px;
text-decoration:none;
color: #000;
}

.menu a:hover {
color:#c0c0c0;
}

.menu a:active {

color:#c0c0c0;
}

.contentwrapper {
width: 700px;
height: 500px;
border: 1px solid #000;
}

.content {
width: 680px;
height: 490px;
border: 1px solid #000;
border-top: 1px;
background-color: #ffcc9a;
margin: 0 10px 10px 10px;

}

.contentimage {
border: 1px solid #000;
border-bottom: 0px;
width: 700px;
}

</style>
</head>

<body bgcolor="d8aa7c">
<center>
<div id="wrapper">

<div class="bannerwrapper">
<div class="banner"><img src="banner.jpg"></div>
</div>
<div class="menu">
<a href="Home.html">Home Page</a> |
<a href="Home.html">About Us</a> |
<a href="Home.html">Staff</a> |
<a href="Home.html">Members</a> |
<a href="Home.html">Forum</a> |
<a href="Home.html">Links</a>
</div>
<div class="contentimage"><img src="content.jpg"></div>
<div class="contentwrapper">
<div class="content">Content will go here</div>
</div>
</div>

</body>
</html>
Pegasus
10-01-2007, 09:17 PM
I think I lost you.

What you need to do is make up one image that stretches all the way across the page. It only needs to be 1 or 2 px high, but it will have both the left and right sides in it. *That's* what you need to put as the background to the #wrapper.

Peg
Foostaple
10-01-2007, 09:26 PM
Oh... Ok I gotcha, I think thats going to be hard to align everything perfectly but I'll try. What do you think I should make the width? Is there anyway I can make it start repeating from the center? Because say the first bar is however many pixels from the beginning, I made it look right on my monitor but on other peoples it might not work.

- Also a little side thing. The only way i could get my site centered is by putting a random <center> tag below the body tag. I know thats not how I should be doing it
Pegasus
10-01-2007, 11:08 PM
Your CSS should include:

#wrapper {margin: 0px auto; padding: 0px; }

That should center the main part of the page. If you have a width of 760px, that should work to include the vertical scrollbar for a total width of less than 800px. That'll fit on any screen then.

Peg
Foostaple
10-02-2007, 02:21 PM
http://www.freewebs.com/maxpowerbtch/index.html

^ Thats what I got so far now. I made the fullbar 1000px, it doesn't go near all the way through my screen and the bars are not lined up properly. I could go into paint and move the bars around until it fits my screen right, but then on other screens it might not. I think I'm missing something
Foostaple
10-03-2007, 07:10 PM
I did something a little different and it works. I made a second wrapper to go around my main wrapper and made that 800px than made a 800px fullbar image and set it as the second wrapper background, then just set the body's background. Anything wrong with it? I can easily go back to the other way.

http://www.freewebs.com/maxpowerbtch/index.html

Also, I still can't get it all to center in IE
Pegasus
10-03-2007, 07:15 PM
That should work. You may have to add "text-align: center;" to the CSS for the main wrapper to center. IE can be a bit fussy about margins.

Peg
Foostaple
10-03-2007, 07:23 PM
Alright cool, everything seems to be working great. Thanks for all your help!
Pegasus
10-03-2007, 08:27 PM
You're quite welcome. Glad I could help.