repeat a horizontally centered background image

Legacy_Staff · #1 (**permalink**) Jul 13th, 2006, 17:53

I'm trying to position a 770 wide by 1px high, repeating, background so it appears as a centered column the entire length of the page regardless of what height that may be.
I can't just use the value 'center' as this throws the column 1 pixel out of kilter with a sliced navigation bar going on top of it at the top of the page.
The NavBar slices appear very nicely centered, at the top of the page, using:

Code: Select all

#Table_01 {
 position:absolute;
 left:50%;
 top:20px;
 width:770px;
 margin-left: -385px;
}

Therefore, I thought, I can do the same for the background image.

Code: Select all

body
{
 background-image: url('Background.jpg');
 background-repeat: repeat-y;
 left:50%;
 width:770px;
 margin-left: -385px;
}

But no.
It repeats, but the whole column appears on the left of the page.
Little help?

Btw, once I've done this, I predict my next question will be about putting accessibility navigation in the space above the NavBar.

moojoo · #2 (**permalink**) Jul 13th, 2006, 18:07

background: url("background.jpg") top center repeat-y;

PixelLuv · #3 (**permalink**) Jul 13th, 2006, 18:08

what i see there is a box (body) that pulled left by the margin. have you tried getting rid of the margin? i think the bg will default to left: 0;

let me know if im not getting the issue. this is an interesting problem.

btw. what doctype are you using?

~Pxl

ukgeoff · #4 (**permalink**) Jul 13th, 2006, 21:38

Definitely get rid of the negative margin. All its doing is pulling the table left by that amount so about half of it is disappearing off to the left.

Quote:

Btw, once I've done this, I predict my next question will be about putting accessibility navigation in the space above the NavBar.

You shouldn't be thinking about putting accessibility navigation above the navbar. Rethink your main approach to navigation so that it is accessible in its own right.

Do your nav bar styling through css.

Legacy_Staff · #5 (**permalink**) Jul 14th, 2006, 11:18

The margin thing is in order to center the image on the page though.
It works perfectly for the navbar.
I'll try it on the bg image anyway and see if it helps.
Thanks for the tips.

I'm using the NavBar because I don't know enough about CSS yet to use that instead so I've had to create images in ImageReady with html, xhtml, css and javascript. I'd do it in CSS if it's possible (and if that's easier, and when I find out how). I'm afraid CSS and I haven't yet reached a stage where we have common reference points of understanding so it's all Chinese to me still.

I had the page all nicely laid out and ready to publish using tables and html but I'm trying to convert it to CSS as an exercise (for myself really I suppose) to see; a) if I can do it, and b) if there actually is any benefit over the method I would use normally.

Legacy_Staff · #6 (**permalink**) Jul 14th, 2006, 11:26

Okay, I cheated a bit;
I reduced the width of the NavBar so the two images weren't competing for the same co-ordinates and then (in case anyone else wants it) used the following code to centre the background behind NavBar.

Code: Select all

* {
 padding: 0;
 margin: 0;
 }
BODY {
 background: url('Background.jpg') repeat-y top center;
 width: 770px;
}

It looks just how I want it to now.
Thanks for the clues and tips everyone, especially moojoo for the line I needed.
I wouldn't have known where to begin this without all your replies (and last night's rest

)

ukgeoff · #7 (**permalink**) Jul 14th, 2006, 12:09

Drop the css for * and make this code below your starting point. It will be the same for every layout you do apart from maybe chosing different fonts and setting the basic width and colours.

Code: Select all

body {
     background-color: #FFFFFF;
     color: #000000;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 101%;
     text-align: center;
     position: relative;
     margin: 0;
     padding: 0;
     padding-top: 10px;
}

#mainframe {
    width: 700px;
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
    text-align: left;
}

A div with an id='mainframe' becomes the element which contains everything else.

The text-align: center bit in the body styling is for IE's benefit. Proper browsers will respond to the margin: 0 auto style in the mainframe to centre that element.

The text-align: left in the mainframe is to turn off the effect of text-align: center in the body.

Add you background image code to the mainframe. Adjust the width to suit your needs.

Keep the position: relative even if you don't know why for the moment. You'll need them down the line as a 'reference' point. Remember CSS stands for cascading style sheet. Operative word here being 'cascade'.

I put a tutorial together on producing css driven menu systems. You can fine it here.

http://1ontheweb.net/downloads/Creat...enu_system.pdf

Work through that then come and ask questions.

moojoo · #8 (**permalink**) Jul 14th, 2006, 12:37

The nagtive margin thing is ideal if you want to vert/hor center a layout with CSS. But for this purpose I don't think you need it as it is very simple to center a layout horizontally.

For example and this may be a bit off topic but eh. the following example will vertically and horizontally center a 400 x 200 box:

#foo {
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -200px;
}

moojoo · #9 (**permalink**) Jul 14th, 2006, 12:40

One more thing. Changed up and lightened your code a bit:

HTML: Select all

body {
     background-color: #FFFFFF;
     color: #000000;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 0.9em;
     text-align: center;
     margin: 0;
     padding: 10px 0 0 0;
/* add */
text-align:center; /* centers #mainframe for IE 5.x */
}

#mainframe {
    width: 700px;
    margin: 0 auto;
    margin-bottom: 5px;
    text-align: left;
}

Legacy_Staff · #10 (**permalink**) Jul 14th, 2006, 18:22

I think I may be in for a bit of a rough time... everything after my last post made no sense to me whatever.
LMAO!

Give me a few hours and I'll have a read through it all and compare it to the code I have and see what affects what and whether I get a sense of 'belonging' yet.

*sigh*

ukgeoff · #11 (**permalink**) Jul 14th, 2006, 19:37

Hey Moojoo

I guess we could get into a philosophical about this code.

I dont see why you have add the second 'text-align: center' in the body styling.

I think the font-size in the body should be whatever the end user has set their base font size to be in their browser, then you use the em to go above and below that size as required. Ideally this would be set to 100% but the value used gets around yet another of those annoying little IE bugs.

moojoo · #12 (**permalink**) Jul 14th, 2006, 20:22

Quote:

Originally Posted by ukgeoff

Hey Moojoo

I guess we could get into a philosophical about this code.

I dont see why you have add the second 'text-align: center' in the body styling.

I think the font-size in the body should be whatever the end user has set their base font size to be in their browser, then you use the em to go above and below that size as required. Ideally this would be set to 100% but the value used gets around yet another of those annoying little IE bugs.

That would be because I never learned to read! i missed the first one. My fault.

moojoo · #13 (**permalink**) Jul 14th, 2006, 20:23

Quote:

Originally Posted by ukgeoff

Hey Moojoo

I guess we could get into a philosophical about this code.

I dont see why you have add the second 'text-align: center' in the body styling.

I think the font-size in the body should be whatever the end user has set their base font size to be in their browser, then you use the em to go above and below that size as required. Ideally this would be set to 100% but the value used gets around yet another of those annoying little IE bugs.

That would be because I never learned to read! i missed the first one. My fault. As for the font size, percent isn;t so bad its pixel values that IE in particular has problems resizing etc.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ie 6 background-repeat does not work	AndrewChip	Web Page Design	3	May 4th, 2008 10:19
BG image centered	afowler	Web Page Design	3	Oct 16th, 2007 16:34
[SOLVED] CSS Background Repeat	Stuart	Web Page Design	23	Sep 29th, 2007 22:36
background-repeat: repeat y not working properly	AdRock	Web Page Design	12	Feb 25th, 2007 22:17
Background image left and right of centered div	AdRock	Web Page Design	11	Aug 15th, 2006 17:02

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
repeat a horizontally centered background image