Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Can not position background image

Reply
Thread Tools

Can not position background image

 
 
Leupi
Guest
Posts: n/a
 
      03-03-2008
I am trying to position a background image in a div:

#wrapper2 {
margin-top: 0;
margin-left: auto;
margin-right: auto;
min-width: 710px;
max-width: 1000px;
min-height: 400px;
border: 1px solid gray;
/*
background-color:white;
*/
background-image: url(images/eae3ce_tile.gif);
background-position: 40px 220px;
background-repeat: repeat-y;
}

according to the above code (I would assume) that the image would start
40px from the left and 220px from the top. This is not the case; it is
starting 40px from the left; however, it is starting at the very top and
not 220px below that.

The image is a 240px wide by 1px tall image tiled in the y axis. Any
thoughts as to what I am overlooking? BTW, I have commented out a few of
the other background images for clarity so the site is not quite as bad
as it seems at the moment (although it is far from finished...)

http://mysite.verizon.net/leupi5/

Thanks,
Todd
 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      03-03-2008

"Leupi" <(E-Mail Removed)> wrote in message
news:l1Lyj.13832$ES.11898@trnddc05...
>I am trying to position a background image in a div:
>
> #wrapper2 {
> margin-top: 0;
> margin-left: auto;
> margin-right: auto;
> min-width: 710px;
> max-width: 1000px;
> min-height: 400px;
> border: 1px solid gray;
> /*
> background-color:white;
> */
> background-image: url(images/eae3ce_tile.gif);
> background-position: 40px 220px;
> background-repeat: repeat-y;
> }
>
> according to the above code (I would assume) that the image would start
> 40px from the left and 220px from the top. This is not the case; it is
> starting 40px from the left; however, it is starting at the very top and
> not 220px below that.


It *has* started 220 pixels down from the top. Your trouble is that you have
told it to repeat in the y direction and that is what it has done, repeated
down *and* up to fill up the entire height of your div. This is what
repeat-y does.

--
Richard.


 
Reply With Quote
 
 
 
 
Leupi
Guest
Posts: n/a
 
      03-03-2008
rf wrote:
> "Leupi" <(E-Mail Removed)> wrote in message
> news:l1Lyj.13832$ES.11898@trnddc05...
>> I am trying to position a background image in a div:
>>
>> #wrapper2 {
>> margin-top: 0;
>> margin-left: auto;
>> margin-right: auto;
>> min-width: 710px;
>> max-width: 1000px;
>> min-height: 400px;
>> border: 1px solid gray;
>> /*
>> background-color:white;
>> */
>> background-image: url(images/eae3ce_tile.gif);
>> background-position: 40px 220px;
>> background-repeat: repeat-y;
>> }
>>
>> according to the above code (I would assume) that the image would start
>> 40px from the left and 220px from the top. This is not the case; it is
>> starting 40px from the left; however, it is starting at the very top and
>> not 220px below that.

>
> It *has* started 220 pixels down from the top. Your trouble is that you have
> told it to repeat in the y direction and that is what it has done, repeated
> down *and* up to fill up the entire height of your div. This is what
> repeat-y does.
>


Well, that certainly makes sense. Looks like I need to take a different
tack to accomplish this. Now that you mention it, that should have been
obvious.

Thanks!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
background image position David Graham HTML 9 03-06-2006 10:22 AM
position image based on document position edouard.lauer@pt.lu Javascript 3 01-14-2006 06:04 PM
Position of a table background image Werner Reiter HTML 1 12-25-2004 06:29 PM



Advertisments