CSS background positioning- help!
Ed
http://brenhamrentals.com/index_new.html At the top of my page is the
header image. Using CSS, I've got the background (which is a gif image of a
line the height of the header image and 1 px wide) repeating in the x
direction, but want to move it down and to the right so it "starts" at the
same position as the header, which is a little lower to the right. Right now
it's set up like:
<style type="text/css">
body {background: #cccc99 url(sliced/hdr_line.gif) repeat-x;}
</style>
It seems like every time I try to put in position or padding info in the
style, it screws it up and ends up repeating down in the y-direction as
well. Is this possible to correct without using layers? I'd like it to work
in as many browsers as possible. Thanks in advance! -Ed
brucie
"Ed" <e_e_daniels(remove)@hotmail.com> said...
adjust the 20px to get it down far enough but it would be better to
change the image itself
<style type="text/css">
<!--
BODY{
background-image : url(an_image.gif);
background-repeat : repeat-x;
background-position : 0px 20px;
}
-->
</style>
--
brucie
Ed
itself wouldn't help to reposition to the right 20px which needs to be done
as well.
"brucie" <bru...@alt-html.org> wrote in message
news:MPG.16554d0c9...@news-central.giganews.com...
Ed
"brucie" <bru...@alt-html.org> wrote in message
news:MPG.16554d0c9...@news-central.giganews.com...
brucie
"Ed" <e_e_daniels(remove)@hotmail.com> said...
> > > Hi all. I've been trying to get this to work to no avail. Look at
> > > http://brenhamrentals.com/index_new.html At the top of my page is the
> > > header image. Using CSS, I've got the background (which is a gif image
> of a
> > > line the height of the header image and 1 px wide) repeating in the x
> > > direction, but want to move it down and to the right so it "starts" at
> the
> > > same position as the header, which is a little lower to the right. Right
> now
> > > it's set up like:
> > >
> > > <style type="text/css">
> > > body {background: #cccc99 url(sliced/hdr_line.gif) repeat-x;}
> > > </style>
> > >
> > > It seems like every time I try to put in position or padding info in the
> > > style, it screws it up and ends up repeating down in the y-direction as
> > > well. Is this possible to correct without using layers? I'd like it to
> work
> > adjust the 20px to get it down far enough but it would be better to
> > change the image itself
> >
> >
> > <style type="text/css">
> > <!--
> > BODY{
> > background-image : url(an_image.gif);
> > background-repeat : repeat-x;
> > background-position : 0px 20px;
> > }
> > -->
> > </style>
> Adjust the 20px how?
increase 20px to move the image down or decrease it to move the image up
the screen
> I've tried various different ways. Changing the image
> itself wouldn't help to reposition to the right 20px which needs to be done
> as well.
to move the image away from the left of screen increase 0px
why don't you just stick the logo in a table and use the vertical lines
as the table background? thats more accurate than stuffing around trying
to positioning the background which will most likely be located
differently with different browsers/systems
--
brucie