Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can't get banner image to register (line up) over background image

    Greetings Oh Wise Ones :-)

    I'm building a band website that uses a large (1680 x 1120 px) background image gif with the intention that the image will fill a range of monitor sizes and resolutions. The image features sunrays radiating from a point.

    Overlaid and top-centred on this background is a banner image of the band (900 x 450 px). The point source of the sunrays is behind the drummer.

    Here's the desired result, the sunrays radiating seamlessly to the edges of the monitor.



    Having composited the image above, the band pic was cropped out and saved seperately, then the background was saved with the band layer turned off. So as long as the browser overlays them top-aligned and centred the rays should match up perfectly.

    But check the discontinuities in some rays here


    Can anyone say why they don't line up? And if they line up one one monitor size and rez, will that be true for all ?

    Many thanks..........Jon

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    1. You should have used the background image exactly like a background, that means using the CSS background property of the body, not straight like an IMG element.

    2. You should have cropped the band image without the background rays, that means as a transparent PNG image, not a JPG
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    nathanoj (05-11-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Shazaam! Thanks Kor. Going transparent sure solved the registration issue.
    But looking at the result on 2 different monitors the background position relative to the band image differs on each monitor. No biggie but I imagined that the background might scale up or down but its focal point would remain centred. Don't why that shift happens - but it would mean an impossible task lining things up using my previous method, even if I got it right on one monitor.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Use the position to center the background.
    Code:
    background-attachment:fixed;
    background-position:center;
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    More goodness. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •