...

View Full Version : background repeating help



aerabax
07-01-2010, 09:23 PM
http://img35.imageshack.us/img35/4460/31583593.png

hi i am trying to find something out for a friend. i need a code that will make the middle of my content body extend down as long as i need it.

as you can see from the screenshot i can't figure out how to make this image: http://img714.imageshack.us/img714/6057/bodymiddle.png

repeat itself down the middle to fill that whole area up correctly.

there should be a simple code for this if not let me know how to do it thanks

BoldUlysses
07-01-2010, 09:32 PM
I assume you're coding using CSS and that your site is a fixed-width center-container layout (http://bonrouge.com/3c-hf-fixed.php)?

If so, try this CSS on your container:


#container {
background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
}

aerabax
07-02-2010, 01:15 AM
I assume you're coding using CSS and that your site is a fixed-width center-container layout (http://bonrouge.com/3c-hf-fixed.php)?

If so, try this CSS on your container:


#container {
background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
}

No, it isn't.

I'm just trying to use THIS image: http://img714.imageshack.us/img714/6057/bodymiddle.png

And have it repeat itself down the middle of the page over and over as long as I need it for the content to fit and so the middle isn't an open window.

http://img192.imageshack.us/img192/7691/contentn.png

There is another screenie to show the area I want covered by that image.

BoldUlysses
07-02-2010, 02:01 AM
It would be helpful if we could see what code you have already instead of just providing a screenshot—can't know exactly what code to recommend without knowing how your site is put together.

In any case, try this:


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled</title>

<style type="text/css">

* {
margin:0;
padding:0;
}

body {
background:#333;
}

div {
width:935px;
margin:0 auto;
padding:20px;
}

#container {
background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
color:#fff;
}

</style>

</head>

<body>

<div id="header">Header goes here.</div>

<div id="container">This div will expand with the content inside. Change the text size in the browser window to see it get taller and shorter. 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.</div>

<div id="footer">Footer goes here.</div>

</body>
</html>

The key line is highlighted in red.

jhaycutexp
07-02-2010, 02:03 AM
well you should try to post your html code here so that we can inspect or give a link..

anyways.. here it goes..

assuming you have that 3 divs.. you got that top-border mid-content and then bottom border



<div id="content-wrapper">
<div id="top-border"></div><!--top-border"-->
<div id="mid-content"></div><!--mid-content-->
<div id="bottom-border"></div><!--bottom-border-->
</div><!--content-wrapper-->


body{background:url(images/bg.jpg) no-repeat;}
#top-border{background:url(images/top.jpg) no-repeat;}
#mid-content{background:url(images/bodymiddle.png) repeat-y;} // or just simply repeat;
#bottom-border{background:url(images/bot.jpg) no-repeat;}

celexia
07-02-2010, 06:22 AM
It would be helpful if we could see what code you have already instead of just providing a screenshot—can't know exactly what code to recommend without knowing how your site is put together.

In any case, try this:


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled</title>

<style type="text/css">

* {
margin:0;
padding:0;
}

body {
background:#333;
}

div {
width:935px;
margin:0 auto;
padding:20px;
}

#container {
background: #000 url('http://img714.imageshack.us/img714/6057/bodymiddle.png') repeat-y;
color:#fff;
}

</style>

</head>

<body>

<div id="header">Header goes here.</div>

<div id="container">This div will expand with the content inside. Change the text size in the browser window to see it get taller and shorter. 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.</div>

<div id="footer">Footer goes here.</div>

</body>
</html>

The key line is highlighted in red.

This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.

Huendin
07-02-2010, 06:44 AM
This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.

Try using an HTML space.

For example:



<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Extend the code as much as you'd like to repeat your graphic. There may be a cleaner way of doing this that someone else might be able to suggest, though.

jhaycutexp
07-02-2010, 07:14 PM
This code worked, except for one thing. It won't show up unless i have text, but I just need it to blank and move down. I tried padding, and it works, but it screws up the rest of my template and sends everything down more where it shouldn't be.

Then just give it a height... height:xxxpx;

Apostropartheid
07-02-2010, 07:27 PM
Do not give it a "HTML space". This is unsemantic and, well, wrong. As j...the previous poster said, setting an explicit height should solve your problem.

mbaker
07-02-2010, 09:46 PM
Add to the CSS for #container:

min-height:200px;


This will set a minimum height of 200px for your container so you can see what it looks like, even if there is not content in your container.

It will also expand beyond 200px if the content needs it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum