Author Topic: css overlay  (Read 1447 times)

0 Members and 1 Guest are viewing this topic.

Offline weathergirl

  • Forecaster
  • *****
  • Posts: 677
    • Beamsville Weather Station
css overlay
« on: December 12, 2010, 08:08:54 PM »
Would anyone have any suggestions as to how I can use css to overlay a .png image onto my radar display?
Ann-Marie
Beamsville, Ontario, Canada

Offline ELDoradoWx

  • El Dorado Weather
  • Senior Contributor
  • ****
  • Posts: 298
  • Gentoo X = Complete_Control
    • El Dorado Weather
Re: css overlay
« Reply #1 on: December 20, 2010, 05:25:40 PM »
Would anyone have any suggestions as to how I can use css to overlay a .png image onto my radar display?

Hi Weathergirl,

Just to double check, your png image is transparent, right?

If I understand correctly what you are trying to do, you could use the below css code to lay one image over another item.

Code: [Select]
position: absolute; top:0px; left:0px;
The above code can be used to place both files on the top left of a page. Of course the radar display goes first and then the png image. Then you could do a php include to pull the overlayed image page to any other page on your site.

Hopefully this is what you are looking for.
 
-Danny
-root is everything

Offline weathergirl

  • Forecaster
  • *****
  • Posts: 677
    • Beamsville Weather Station
Re: css overlay
« Reply #2 on: December 20, 2010, 05:39:18 PM »
Thanks, Danny. I wanted to use a colour legend image (transparent) on my GRLevel3 radar image, so do you think your suggestion will work?
Ann-Marie
Beamsville, Ontario, Canada

Offline ELDoradoWx

  • El Dorado Weather
  • Senior Contributor
  • ****
  • Posts: 298
  • Gentoo X = Complete_Control
    • El Dorado Weather
Re: css overlay
« Reply #3 on: December 20, 2010, 05:57:49 PM »
Thanks, Danny. I wanted to use a colour legend image (transparent) on my GRLevel3 radar image, so do you think your suggestion will work?

It would help me to see both images, their sizes, and where you would want the legend to appear on top of the image. I am guessing the legend image is much smaller than the radar image? The method I posted above works best if both images are identical in size.

You might be able to overlay the legend .png directly onto your radar image without the need of a separate page. The only problem with this can be browser compatibility. Sometimes IE8 can render the code a bit differently than Firefox which can mess things up sometimes by putting the overlay in two slightly different places over the image.
-Danny
-root is everything