Repeating Horizontal Image wont align at top!, Repeating Horizontal Image wont align at top! Options

[j00sh]

The repeating horizontal image at the top of my page wont align at top and the image on the page wont align centered?!

How should I go about fixing this?

Here's the problem

PS: I realize the horizontal image is smaller...its just used as an example.

This post has been edited by j00sh: Apr 10 2007, 06:40 PM

[pandy]

The repeating horizontal image at the top of my page wont align at top

Because the DIV it's used with isn't at the top. Either remove the default margin and padding from BODY or use the background image directly with BODY

and the image on the page wont align centered?!

Do you want it centered on the page? The DIV it's used as background for is positioned 50% from the left, so the background can't very well be centered on the page.

I'm not sure I get this centering thing right, but if you mean center of the page I'd rather center the div. I'd also use only one div and get rid of the positioning, z-indexes and so on. Something like so.

CODE

body      { margin: 0; padding: 0;
            background: #070707 url(http://i16.tinypic.com/43pgbaq.jpg) repeat-x }

.div1     { height:900px; width: 900px;
            margin: auto;
            background: url(http://i13.tinypic.com/2jaxf1e.jpg) center }

HTML

<div class="div1"></div>

Is that how you mean?

[pandy]

BTW a large picture mainly of the color black is a little frivolous. I'd cut the image down and match the background color for body to the black in the image instead. Also, the text uses an ordinary font so why not use real text?

[j00sh]

You are amazing! thanks for the help, worked flawlessly.

[j00sh]

BTW a large picture mainly of the color black is a little frivolous. I'd cut the image down and match the background color for body to the black in the image instead. Also, the text uses an ordinary font so why not use real text?

I changed the background image a little so it would include the gradient...umm as for the text, I though it looked good and was just going to make hotspots in dreamweaver? I dunno. I was trying to find someone else to help me with coding and web design but no one was willing so I figured Id get a little help here and give it a shot myself.



How would I go about placing a text similar to the one on the image, in the same spot but just normal font and not an image like you suggested?

This post has been edited by j00sh: Apr 10 2007, 10:06 PM