Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length
May 22, 2012, 10:50:19 PM

Pages: [1]   Go Down
« previous next »
  Print  
Author Topic: Background image with a linked image on it--newbie  (Read 771 times)
EJ
Galactic Royalty
*****
Offline Offline

Posts: 248
« on: December 08, 2003, 05:26:19 AM »
Hope someone can help

On my entrance page Im using a full page image as the background with another image link(a door) to go into my site, the problem Im having is the door won't stay in the right place, its an image that is already on the background. When I resize the page it moves out of place,  Is there some way to keep the door image where it should be?

Take a look, please?
steelsheen.com

Thanks
I use netscape7 browser and  composer to edit


Edit: Everytime I work on this page I lose my visitor count and have to reset it, anyway around this?
Logged
I love the new LPF theme
Danielle
Guest
« Reply #1 on: December 08, 2003, 09:10:34 AM »
Hi EJ,

The CSS property background-image:url() had the capability to accept other properties as well such as background-repeat and background-position.  Here is a listing of these properties and valid arguments for them at w3schols:

http://www.w3schools.com/css/pr_background-position.asp

Looking at your source, I find the following:

Code:
<body style="color: rgb(127, 127, 95); background-color: rgb(0, 0, 0); background-image: url(http://steelsheen.com/bg/moria-gate.jpg);"
 link="#7f7f5f" alink="#7f7f5f" vlink="#7f7f5f" text="#7f7f5f"
 bgcolor="#000000" background="http://steelsheen.com/bg/moria-gate.jpg">


As, I am not certain why you have background listed twice, I have removed the non-CSS version in the following code:

Code:
<body style="color: rgb(127, 127, 95); background-color: rgb(0, 0, 0); background-image: url(http://steelsheen.com/bg/moria-gate.jpg);" link="#7f7f5f" alink="#7f7f5f" vlink="#7f7f5f" text="#7f7f5f" bgcolor="#000000">


Now, you should likely add some code such as background-repeat:no-repeat to the style as well as background-position:center center, which would give you the following:

Code:
<body style="color: rgb(127, 127, 95); background-color: rgb(0, 0, 0); background-image: url(http://steelsheen.com/bg/moria-gate.jpg);background-position:center center;background-repeat:no-repeat" link="#7f7f5f" alink="#7f7f5f" vlink="#7f7f5f" text="#7f7f5f"
 bgcolor="#000000">


Additionally, I am wondering why you have the style sheet background-color and bgcolor...I would remove the bgcolor completely, and put the background-color to sth that give your picture the impression of filling up the entire screen (like maybe a dark brown or gray).

I hope this helps.
Logged
EJ
Galactic Royalty
*****
Offline Offline

Posts: 248
« Reply #2 on: December 08, 2003, 11:48:00 AM »
Quote
Additionally, I am wondering why you have the style sheet background-color  and bgcolor ...

umm I don't know lol except maybe composer inserted it? anyhow, I removed it.

I tried out this code (background-position:center) in composer but I lost most of the picture, so I don't think thats what I'm looking for.

What I really need is a way to keep my linked .gif (the door) from moving from it's position when the window is resized. The door where you enter is a mirror of the door on the main background image, so instead of having the whole picture as a link, just the door is a link.I've seen it done on other sites before so I know it can work.

I'm still playing with tables and might try linking with a transparent spacer.gif,  I thought maybe an image map might work but I looked into that and it looks complicated. I don't know I'm flying by the seat of my pants here.  

Thanks for trying Miraenda
Logged
I love the new LPF theme
Danielle
Guest
« Reply #3 on: December 08, 2003, 12:45:03 PM »
Hi EJ,

To keep your linked gif from moving on the page, you would need to use CSS absolute positioning, like <img src="img.gif" style="position:absolute; top:10%;left:10%" /> where the top and left positions are where you want the gif located on the page.  Absolute positioning means the image will not move if the page changes size.  I will look into the issue further, but I believe the your picture should not have been "lost" on the page if you put center center for positioning since this centers the image in the exact center.  If you only put center (rather than center center), then I am not certain what results you would end up with.

Again, I hope this helps.
Logged
EJ
Galactic Royalty
*****
Offline Offline

Posts: 248
« Reply #4 on: December 08, 2003, 12:56:45 PM »
The top part of the  background image was cut off with that tag,the whole image wasn't showing.

I think I found a solution (temporary one anyway) I used a transparent spacer.gif and made it a link, at least I won't get a double image if it moves alittle on the page. This will work until I can figure out all this css stuff lol (need a spinning head "smiley" to insert)

Thanks
Logged
I love the new LPF theme
Pages: [1]   Go Up
  Print  
« previous next »
 
Jump to: