I know this is possible but need some help from this great community...

I'm trying to get the wavy background shown in the sample page to line up with the logo/masthead (which includes the wave plus additional images). The problem is due to centering the page in one's browser.

the background image goes from "valley" to "valley" with the apex of the curve in the dead center of the image. The masthead starts 265px from the edge of the background image, when everything is lined up properly.

so if I were to use some type of background-position offset for the main background image would I be able to still align my masthead in the center of the page using

#top {margin:0px auto;}

thanks!

3 answers

Doug 1095
3
points

Add:

body {background-position:center top;}

and change your background image so the centers of the background and masthead images line up.

Bonus tip: You can combine your rule declaration like so:

body {
  background:#0a6d30 url(../images/bg.jpg) repeat-x center top;
}
Answered almost 7 years ago by Doug
  • yes I noticed that the background doesn't move when the browser is resized, so I think centering the initial background then offsetting the masthead should do the trick. Stephan Hovnanian almost 7 years ago
Mottie 1134
1
point

I messed around with your CSS a bit, and this is the best I could come up with. It's not exactly centered because that's I had to move it to the right to make the wave effect line up correctly. I tried shifting everything to the left, but since you are centering the #top element, it cut off the left side of the background.

body {margin:0px; padding:0px; background:#0a6d30 url(bg.jpg) top center repeat-x;}
#container {margin:0px auto; width:860px;}
#top {width:1060px; height:350px; background: url(logo.jpg) 194px 0px no-repeat;}

What might work better would be to have the logo image only include the oval logo on a transparent background

and add the text and circular background image on the background image. I posted a demo here.

body {margin:0px; padding:0px; background:#0a6d30 url(http://i45.tinypic.com/x0nvoz.jpg) top center repeat-x;}
#container {margin:0px auto; width:860px;}
#top {width:400px; height:220px; background: url(http://i45.tinypic.com/jb4kd2.png) 150px 110px no-repeat;}
Answered almost 7 years ago by Mottie
0
points

RESOLVED. Once I learned about positioning the background from the answers above in the center of the page, it was just a matter of lining up the edges of the masthead image at the same point in the continuous curve.

To do this, first I re-cropped my background image starting in the center of the page (so the left & right edges of the repeating image weren't symmetrical, but it didn't matter because the background was continuous).

Then I added another DIV tag to push the masthead (and the rest of the page) over enough so the 860px wide masthead (and rest of the page) lined up at the correct point on my curve.

It was a little tricky only because you couldn't just measure the amount of space in Photoshop...because these DIV's were centered each time you move a px it changes the margin on EACH side of the DIV, but it didn't take too long.

thanks to both of you for your help.

Answered almost 7 years ago by Stephan Hovnanian