8 replies [Last post]
case
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2006-01-18
Posts: 24
Points: 0

Hi all!

this is my first time, and i find this one hard to explain; so i hope this makes sense.

basically, my problem involves trying to place a repeating (y axis) background image in the wrapper div (the wrapper DIV is used to centre design on the webpage.)

[img][/img][/url]

Im a beginner and i cant see where the problem is in my code.
I have been stuck on this for days and cant fight my way out of this.

can be seen here for a bit more clarity -
http://www.case236.co.uk/mysite/rural.html
css file -
http://www.case236.co.uk/mysite/css/rural.css

- heres the basic building blocks/structure of the page in question:

HTML CODE:

<body>
<div id="wrapper>/*holds all content together*/
<div id="navtabs"/*the 2 tabs on the left*/
<div id="navtabsContainer"></div>
<div class="retro"><a href="retro.html"><img src="images/spacer.gif" width="36" height="87" border="0" /></a></div>
<div id="ruraltab"><img src="images/spacer.gif" width="36" height="87" border="0" /></div>
</div>
/*end 2 tabs DIVs*/
<div id="banner">/*main header graphic*/</div>
<div class="clear">/* clear both command */ </div>
<div id="navcontainer">/*nav bar code */
<ul id="navlists">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive" class="current"><a href="#" id="subcurrent">Beautiful City mural</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
<li><a href="#">Subitem five</a></li>
<li><a href="#">Subitem six</a></li>
<li><a href="#">Subitem seven</a></li>
<li><a href="#">Subitem eight</a></li>
<li><a href="#">Subitem nine</a></li>
</ul>
</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
/* end nav bar code */
<div id="content">/* text and 'face' graphic */
<div class="clear">/* clear both command */</div>

And the DIV im trying to fomat...

CSS:

#wrapper {position: relative;margin-top: 0px;margin-left: 0px;width: 911px;margin-left: auto;margin-right: auto; background: url(../images/bkground_repeat_911.gif) repeat-y 0px 0px; margin-left: auto; margin-right: auto;}

im looking to repeat the "central black column" all the way down ( if you highlight the text below the end of the black center, you'll have an idea what im trying to achieve ( i have a background graphic spanning the whole width of the 'wrapper' DIV (911px) or i can span it to where the 'black' ends on the right edge)

Am i going about it the wrong way? or have i missed something simple? or is it just not possible in this senerio.

I hope you made sense of this mess.

thanx (and good luck) to all those who can/try to help.

OSX 10.3.9 and always eager 4 more.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 14 years 21 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

cant get background image on 'wrapper' div to appear

just a quicky here. and I will come back and check when I have more time...

check this article. this is usually how you would approach this type of technique of 'extending' divs down a page.

http://www.alistapart.com/articles/fauxcolumns/

This will get you thinking about how to approach this problem. You may need another container div though if you have already used your wrapper with a bg image... you can alway use <body> and apply bg image to that.

s.

case
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2006-01-18
Posts: 24
Points: 0

cant get background image on 'wrapper' div to appear

thanx for your swift reply.

but i have'nt used a background on the "wrapper" Div so far.

OSX 10.3.9 and always eager 4 more.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 14 years 21 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

cant get background image on 'wrapper' div to appear

#wrapper {position: relative;margin-top: 0px;margin-left: 0px;width: 911px;margin-left: auto;margin-right: auto; background: url(../images/bkground_repeat_911.gif) repeat-y 0px 0px; margin-left: auto; margin-right: auto;} 

are you sure? :?

if that's the one you want to repeat down all the way, then you have to think about where the <div> ends, as the bg image will only extend this far.

case
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2006-01-18
Posts: 24
Points: 0

cant get background image on 'wrapper' div to appear

the background image i want to use is (depends how i go about it) approx 911px - width of the wrapper div - x 3px.

my hope was to have it repeating on the y axis down to the bottom.

if you click and drag down in the page you'll see how far the text goes down, so its not as though theres no 'content' there.

OSX 10.3.9 and always eager 4 more.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

cant get background image on 'wrapper' div to appear

I'm guessing you're gonna have to do something like this:

#content { 
margin: 0; 
background: #000 /* added the background colour */ url(../images/content_area.jpg) 0 0 no-repeat; 
padding: 0 0 50px 0; 
width:711px; /* this will have to change */
width:700px !important; 
float:left; 
position:relative;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

case
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2006-01-18
Posts: 24
Points: 0

cant get background image on 'wrapper' div to appear

thnx for your input Ty, the more the merrier!!

anyway, yeah theres a background of sorts but, it doesnt quiet address the original intension:-

if you look at it now (im updating as im getting your suggestions)

the center area extends completly to the right of the page.

i had previously thought of doing that but i guessed this was gonna be the result.

closest so far though.

i dunno, im afraid this is gonna be a wee bit more complicated - hope it isnt though.

OSX 10.3.9 and always eager 4 more.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

cant get background image on 'wrapper' div to appear

case wrote:
the center area extends completly to the right of the page.

As I said, you're going to have to adjust the width. Or leave the width of #content as it is if you need to space to get the graphic in, but then place your text inside another element inside that which has the black background and a narrower width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

case
Offline
Regular
Last seen: 13 years 37 weeks ago
Joined: 2006-01-18
Posts: 24
Points: 0

EVERYTHINGS ALRIGHT NOW!!

everythings working as it should now.

the problem "seems" to be a case of a corrupt gif file.

i copied/pasted the original into a new file and overwrote the original file; now the background displays as it should.

In terms of code - i went for the background url(myimagefile) 0 0 repeat-y ; method in the body tag.

I'd just like to thank everyone who assissted me in this matter.
thanx to you guys im finally able to move on with this project.

thanx again all

till next time.

OSX 10.3.9 and always eager 4 more.