How can I change the positioning of the BG picture? [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : How can I change the positioning of the BG picture?

Rufaida

07-21-2006, 12:31 PM

Hi :waves:

I'm trying to make the layout have the text box on the right, and a picture on the left side (on the background). The text box has come out okay but with the picture it was showing right in the top lefthand corner, which looked stupid. When I aligned it center, some of the picture was covered by the text box so that also was not ideal. I want to make it position in the centre of the space between the side and of the page and the beginning of the text box, but no idea how to do this :confused:

This is the code I have so far:

<title>.:Rufaida:.</title>
<style TYPE="text/css">

</style>
</head>

<body link="#000000" vlink="#000000" alink="#000000"
topmargin="0" leftmargin="0" bottommargin="0" rightmargin="12">

<p align="center"><br>
</p>

Will be grateful for any help :)

Rufaida

07-21-2006, 12:35 PM

oh if it's needed to get an idea of the size? this is the pic..

http://www.ummah.com/arabic/website/topgraphic1.png

and this is how it is looking:

http://www.ummah.com/arabic/website/main.html

Arwen

07-21-2006, 12:56 PM

background-image: url(YOUR_IMAGE.JPG);
background-position: 160px 500px;

Play around with numbers.

Rufaida

07-21-2006, 12:57 PM

Thank you :D hopefully that will sort it out :)

actually.... I jst tried it and now it is coming out in a tiled effect, with the image repeating over the full page?
I only wanted it to show once. Any idea why it did this?

Arwen

07-21-2006, 01:02 PM

background-repeat: no-repeat;

Rufaida

07-21-2006, 01:13 PM

Thanks Arwen that's working now :D

Arwen

07-21-2006, 01:19 PM

Great! You're welcome! :)

Rufaida

07-21-2006, 01:46 PM

Okay the picture thing is sorted but now I'm having trouble with the text box positioning.My text box is actually a table, I found a site telling me that it will be better to do it with CSS using divs? I would prefer to do that cos I think it is better? But having trouble getting it to work..

I found this code:

<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

So I tried to put that around my table, like putting the html table code where it says layer stuff, and then use that to position it? But I guess that is wrong because it did not seem to do anything?

Arwen

07-21-2006, 02:08 PM

You can go with tables as well. Just add this to your table:

<table border="0" cellpadding="0" cellspacing="0" width="39%"
bgcolor="#394391" style="border: 1 solid #000000; position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1px;" >

Use pixels instead of em.

Rufaida

07-21-2006, 02:54 PM

:confusion its driving me crazy, now that I tried 2 do that the pic is not showing?? :confused:

I have the code like this:

<title>.:Rufaida:.</title>
<style TYPE="text/css">

<body></body>
</head>

<body link="#000000" vlink="#000000" alink="#000000"
topmargin="5" leftmargin="5" bottommargin="5" rightmargin="20" marginwidth="1" marginheight="1">

<p align="center"><br>
</p>
<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="39%"
bgcolor="#394391" style="border: 1 solid #000000; position: absolute; left: 610px; top: 80px; height: 650px; width: 350px; padding: 1px;" > <tr>
<td>  </td>
</tr>
<tr>
<td valign="top" colspan="8"><font color="#FFFFFF">Main Body of Intro Text Here</font><p></body>
</html>

Is it just me or is is not coming up properly now? :S

http://www.ummah.com/arabic/website/main.html

Rufaida

07-21-2006, 03:18 PM

erm this is weird :S

I copied everything over 2 geocities aswell jst 2 see if it would work, so now it is showing differently on there than on the other webspace I had it on?

http://www.ummah.com/arabic/website/index.html
this one has not got the picture, just the table

http://www.geocities.com/canigetawitness2000/index.html
this one has not got the table just the picture

:S I don't get why it can't just show them BOTH? table plus background at the same time in the right place?

Rufaida

07-22-2006, 04:19 AM

I got it sorted now, my friend fixed it for me