Trouble aligning repeating background image

			#content {
			background: #000000 url(../images/repeatbg.jpg) 50% 784;
			width: 758px;
			}

I’m trying to make it so that once the div hits a size of 784 or greater, a repeating backgoung (repeatbg.jpg) shows. 0-784 should show no background. I figured this would work but I must be mistaken :frowning: With the current code, no background displays. I’ve tried a few methods, gotten it to display but it doesn’t go down to the 784px mark.

For one thing you forgot a unit of measurement there…and that’s probably why the background isn’t showing.

If it still isn’t showing after fixing that, try giving it overflow:hidden; (which may be needed if you have floated elements inside Content)

A site would make this a lot easier to debug :).

to add to what RyanReese said, this is a repeating background image, did you want to repeat it everywhere? I dont see repeat-y or x.

Well, I originally had px in after the 784 and repeat-y, like this:


			#content {
			background: #000000 url(../images/repeatbg.jpg) repeat-y 50% 784px;
			width: 758px;
			}

I took the repeat-y out because I wasn’t too concerned about which way it repeated for testing, was just trying to get that problem solved. Anyway, this still has problems. If I put a unit in ‘px’ such as above, it doesn’t offset the start down 784px, it displays it through the entire div. I was under the impression that when you used numbers for background positioning, you just used a number such as background: lalala 0 0; would be top left corner. Regardless, I tried adding overflow:hidden; it changed nothing, though at this point I don’t have anything in content except lines of text for testing.

can you plz provide a link to a live test page?

http://berryequipment.net/orsca/

I’ve got an idea of a work-around. If this can’t be made to work in this way, I can go ahead and do it the other way. Would prefer to just start the repeating 784px down the div though. Thanks

Hi, repeating on a background image doesn’t quite work that way, you may tell it to start 758px (or w/e the number was) down, but since you set repeat-y it will simply just repeat up and down to fill the space.

What was that work around you had in mind :)?

Hi,

Just use the body image to do this by amalgamating it with [URL=“http://berryequipment.net/orsca/images/repeatbg.jpg”]this image incorporated into the right place to make one repeating image on the body only. Then the body will take over ehen your big graphic image finishes. (It may give rise to the 1px jog and in that case you would need to repeat the background on an inner element instead as mentioned in the [URL=“http://www.sitepoint.com/forums/showpost.php?p=2235287&postcount=34”]FAQ.)

The work around I had in mind was flawed, won’t work either. Since the div is/can be the same width as the background, it doesn’t have to be set to repeat-y as long as it starts at the right spot and doesn’t go up.

I got slightly confused on a little bit of this, but I don’t think this will work either. My div has text that will be in it, at the top where the background doesn’t need to show. The background doesn’t need to show because it will overlay some other graphics in that section. It does need to start at a certain distance down the page. It has to end at the end of that div so that the second background will continue from the body down the page. That second background that is on the body is 356px wider than the divs we’re working on here.

I’m going to work on some other parts of the site while you guys are still taking a look at it. Maybe I just didn’t understand the way you explained it, but if you look at the site now I removed the background from that top div. The green div at the bottom of the content area is directly under that div. So basically its background should start where the black square stop and continue on until it hits the green square. Here’s a quick picture I threw together to help explain better. I can explain it like this better than typing it out:

The repeating image that you have applied to the body element is already showing at exactly from where your middle graphic image finishes. If it was not showing then you wouldn’t be able to see it would you?:slight_smile:

All I am suggesting is that you apply a black section to the middle part of that body background image to maintain the illusion of a full length column that will go on forever if necessary.

It will make no difference to your existing images because the body background is under those images. You can apply whatever images you like and they will sit on top of the background as per normal. However whenever you have stopped placing images then the body background takes over. It couldn’t be simpler;)

If that’s not the effect you want then you may need to say why.

That green div will not remain green and the middle of that background cannot be blocked out as it needs to be there to visually complete the layout. The whole point of the top background being blacked out as you are mentioning with the other, is to do like you said and have it be a full length column. Once that column is done, it needs to go back to the full filled in background. The only reason that box is green atm is a placeholder. There is no telling how much will be placed after that initial div if that makes sense.

There is no telling how much will be placed after that initial div if that makes sense.

No -I’m still lost lol :slight_smile:

Do you want the appearance of a 100% high black column that continues where your graphic has finished or not?

All other questions are irrelevant.

If the answer is yes then the method I have mentioned will do what you want.

If the answer is no then I haven’t understood what you want and I apologise :slight_smile:

Do you have a mock up image of the finished layout so I can get an idea?

I can’t get much more clear than this:

The shading is just for clarification, obviously don’t want it that color. It’s all explained on the image.

So you don’t won’t a full length column then :slight_smile: I was mistaken.

Your diagram can be achieved by repeating the image here.


#main-content-holder {
    position: absolute;
    top: 106px;
    left: 0px;
    width: 758px;
   [B] background:url(http://berryequipment.net/orsca/images/repeatbg.jpg) repeat-y 0 0;[/B]
}


That element is already sitting under your home-content images and if you repeat the background on that element it will carry on when the images in front stop. It will the of course stop whenever that div ends which is what you stated you wanted in that diagram

If you want the body background to show through after the black (I’m not sure why you would though) then move the content outside of that element.

e.g.


<!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">
<head>
<title>ORSCA -  Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
    background: #000000 url(http://berryequipment.net/orsca/images/repeatbg2.jpg) repeat-y 50&#37; 0;
}
#container {
    text-align: center;
    width: 100%;
    background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50% 108px;
}
#top {
    text-align: center;
    min-width: 999px;
    height: 108px;
    background: #000 url(http://berryequipment.net/orsca/images/topbg.jpg);
}
#main-container {
    position: relative;
    background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50% 0px;
    width: 1001px;
    min-height: 784px;
    margin-left: auto;
    margin-right: auto;
}
#main-nav {
    position: absolute;
    top: 51px;
    left: 17px;
    width: 956px;
    height: 50px;
    background-color: #434222;
}
#main-content-holder {
 [B]   position: relative;
    margin-top: 106px;
    width: 758px;
    background:url(http://berryequipment.net/orsca/images/repeatbg.jpg) repeat-y 0 0;[/B]
}
#content {
    width: 758px;
    text-align: left;
}
#home_content1 {
    width: 758px;
    height: 391px;
    background: url(http://berryequipment.net/orsca/images/home_contentbg1.jpg);
}
#home_content2 {
    width: 758px;
    height: 305px;
    background: url(http://berryequipment.net/orsca/images/home_contentbg2.png);
}
#sponsors {
    background-color: #434222;
    width: 758px;
    height: 200px;
}
#main-classes {
    position: absolute;
    top: 150px;
    left: 797px;
    width: 203px;
    height: 626px;
}
</style>
</head>
<body>
<div id="container">
    <div id="top"></div>
[B]    <div id="main-container">
        <div id="main-nav">nav</div>
        <div id="main-content-holder">
            <div id="home_content1">[/B]
                <p>test</p>
            </div>
            <div id="home_content2"></div>
            <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
        </div>
      [B]  <div id="content">
            <p>test</p>
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
        </div>
        <div id="sponsors">hello</div>[/B]
        <div id="main-classes"> <img src="http://berryequipment.net/orsca/images/autopromod.png" /> <a href="http://www.southerndieselperformance.com/" target="_blank"><img src="http://berryequipment.net/orsca/images/stp.png" border="0" /></a> </div>
    </div>
</div>
</body>
</html>


Of course that may still be wrong :slight_smile:

I threw your code in place of my index file to give it a try, seems to work correctly in firefox but in IE the spacing is thrown to the right. I’m gonna make these changes to my css file so I can get my older index back, but take a look and see what you can figure out. I’m gonna work with it and see if I can figure anything out. Thanks for your help so far :wink:

edit: I also just noticed that to the right of the main box there, it seems the ‘mainbg’ is there twice, but not aligned correctly. You’ll see what I’m talking about when you look at it.

The layout is shifted in IE because of the text-align:center on the body that will centre block level elements in error.

Reset the text to left here:


#main-container {
    position: relative;
    background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50&#37; 0px;
    width: 1001px;
    min-height: 784px;
    margin-left: auto;
    margin-right: auto;
[B] text-align:left;[/B]
}


There are also some margin collapse issues and z-index issues in IE that need sorting but shouldn’t be too hard to fix but I’m offline now until tomorrow.

I’m not sure what double background you were referring to but we only added an image behind the main column. You may have to match things up in places but shouldn’t be too hard.

FF broke now lol
Will look and see what’s up.

The nav needs to be in the flow.


<!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">
<head>
<title>ORSCA -  Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
    background: #000000 url(http://berryequipment.net/orsca/images/repeatbg2.jpg) repeat-y 50&#37; 0;
}
#container {
    text-align: center;
    width: 100%;
    background: url(http://berryequipment.net/orsca/images/mainbg.jpg) no-repeat 50% 108px;
}
#top {
    text-align: center;
    min-width: 999px;
    height: 108px;
    background: #000 url(http://berryequipment.net/orsca/images/topbg.jpg);
}
#main-container {
    position: relative;
    width: 1001px;
    min-height: 784px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#main-nav {
    position: relative;
    margin-top: 51px;
    margin-left: 7px;
    width: 956px;
    height: 50px;
    background-color: #434222;
}
#main-content-holder {
    position: relative;
    margin-top: 6px;
    width: 758px;
    background:url(http://berryequipment.net/orsca/images/repeatbg.jpg) repeat-y 0 0;
}
#content {
    width: 758px;
    text-align: left;
}
#home_content1 {
    width: 758px;
    height: 391px;
    background: url(http://berryequipment.net/orsca/images/home_contentbg1.jpg);
}
#home_content2 {
    width: 758px;
    height: 305px;
    background: url(http://berryequipment.net/orsca/images/home_contentbg2.png);
}
#sponsors {
    background-color: #434222;
    width: 758px;
    height: 200px;
}
#main-classes {
    position: absolute;
    top: 150px;
    left: 797px;
    width: 203px;
    height: 626px;
}
</style>
</head>
<body>
<div id="container">
    <div id="top"></div>
    <div id="main-container">
        <div id="main-nav">nav</div>
        <div id="main-content-holder">
            <div id="home_content1">
                <p>test</p>
            </div>
            <div id="home_content2"></div>
            <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
        </div>
        <div id="content">
            <p>test</p>
            . <br />
            .. <br />
            . <br />
            . <br />
            . <br />
            . <br />
        </div>
        <div id="sponsors">hello</div>
        <div id="main-classes"> <img src="http://berryequipment.net/orsca/images/autopromod.png" /> <a href="http://www.southerndieselperformance.com/" target="_blank"><img src="http://berryequipment.net/orsca/images/stp.png" border="0" /></a> </div>
    </div>
</div>
</body>
</html>


Back tomorrow.:slight_smile:

Firefox still is messed up with that and IE actually broke over that one too.
If you find anything out tomorrow let me know, I’ll still be looking over it and keep the thread updated. Thanks

You have both css files in place lol and so they are fighting each other :slight_smile:

Comment out the link to your original css file and test again. Once you are happy with it then you can swap the styles into the external file. I always test with files in the head as it’s easier for the first page.

We may be aiming at different targets as I’m just guessing at how things should be in some cases. Foe example your fixed height home_content1 and home_content_2 don’t make much sense to me and can only seem to hold fixed height content which is always a bad move.

Elements should flow logically and very rarely do you set heights on elements that will hold text content unless you have no choice.