View Full Version : Is there a way to have text move together with centered bg-img?

05-14-2010, 04:12 AM
Hi there!
I'm a beginner with CSS, but I'm moving along nicely (I like to think :).
I've created a website for a friend's legal practice and need a little help. Here's the site:
I'm working on a pretty small monitor, and my problem seems to be that on larger monitors, the text and nav all move off the centered background image and onto the grey background color.
My question is: is there a way to have the text and nav move with the background image (without making them all into an image, and without centering the text and nav)?
I have other questions about the site, but this one is the most pressing.
Thanks very much for your help!

Mr Travis L
05-14-2010, 04:30 AM
Could you give me the CSS code to the Left and Right grey sides, the background image, and the part that is overlapping?

05-14-2010, 04:38 AM
sure. forgive me if this includes stuff you don't need, but most of the elements on the site are involved in the question. thank you!!!

background-image: url(images/main-bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: grey;

height: em;
margin: 0;
overflow: hidden;
float: left;
padding: 2em 30em 20em 13em;

padding: 20px 0 0 175px

border-top: 2px solid #99ccff;
width: 42em;
margin-left: 11em;

font-family:century gothic !important;
font-size: small;
margin-left: 10em;
padding:0 0 1.1em;

#navlinks li

#navlinks li a
padding:0 0 0 4em;

#navlinks li a:hover

font-size: 0.85em;
color: grey;
font-family: georgia;
min-width: 450px;
text-align: center;

Mr Travis L
05-14-2010, 04:47 AM
What part is the part that is overlapping? Is that the navlinks?

Also could you give me the HTML Codes to the navbar and background?

05-14-2010, 04:50 AM
it's everything that isn't the background image -- nav and paragraph text. look here and you'll see what i mean:

Mr Travis L
05-14-2010, 05:12 AM
Ahhh, I see. On yours everything is over, I didn't know that. I thought that it was just the navbar and logo because thats all it shows on mine.

Change the body to this:
body {
background-image: url(images/main-bg.jpg);
background-repeat: no-repeat;
background-color: grey;
margin:0px 50% 0px 50%;

Tell me if this works... I can't really think of a better solution this late at night.

05-15-2010, 12:06 AM
no, that messes it up for small screens:

Mr Travis L
05-15-2010, 12:47 AM
Try turning them into tables? Thats how I make all my websites, with <table>.

Easy way to do that would be this:

Put this right under your body tag: <table><tr><td>&nbsp;</td><td width="957">
<table><tr><td>&nbsp;</td><td width="957">

Then put this right above your ending body tag: </td><td>&nbsp;</td></tr></table>

What this does is first makes a blank table on the left (where the stuff is overlapping), then makes another box in the middle that is the same size as your background image (I put 957, because I think that is what your background image width is), then it makes another blank box to the right, this should automaticly put the middle box in the middle, and then make the 2 side boxes take up the rest of the page, with both the same equal width.

If this doesn't work please say.

You "may" have to get rid of your background image, and make it the middle tables background image (nothing differnt, just instead of it being a background image, it would be a table background image).

code beginner
05-15-2010, 03:47 AM
usually if you set everything to margin-left: auto, margin-right:auto, it will all center in a similar fashion.

05-18-2010, 09:03 PM
thanks Mr Travis L, but this is what happened:
looks like my nav is not happy with the table set up. but this may be the right track...

code beginner, i don't think that'll work considering that right now the content has quite a bit of padding on it to get it in the right place...

thank you both for your help!

05-18-2010, 09:10 PM
I think a good solution would be to make a containing div that holds everything in the middle, then place everything inside that...


margin:0 0 0 -50%of size; ok so here the numbers work round clockwise from top so, top, right, bottom, left, so the last number (left) should be minus half the size of the actual div, that way it will always be in the center of the page and this div will in a sense become your new body so apply any padding etc within this to contain everything else.


I hope this helps and I've explained that ok, if you need help let me know.

05-18-2010, 10:35 PM
I think a good solution would be to make a containing div that hold everything in the middle and place everything inside that