Positioning elements via background - CSS-JQuery

Question

Hi , I want to know Is there any way to position one of your HTML element related to the stretched background of your page ?

you have made the background stretched ,

now you want to write something exactly next to your logo .

considering the resolutions and browsers

CSS & JQuery

If you know any strategy or any good article/ tutorial

I would be glad to hear from you

thanks

Answer 1

window.screen.width and window.screen.height may be helpful to you.

Answer 2

You can calculate the coordinates in the window to match the stretched ones. So if the background image is stretched in the back from the coordinate (0,0) all the way to (window.screen.width, window.screen.height) and image size is lets say (800, 600), and your logo is located on the image's coordinates (44, 100), and you want to know the window's coordinates to match the image's one...

function place(div, image_x, image_y, image_w, image_h)
{
    //Calculate the window coordinates that match the image coordinates
    var window_x = Math.Floor((window.screen.width/image_w)*image_x);
    var window_y = Math.Floor((window.screen.height/image_h)*image_y);

    //Make divs position absolute
    $("#"+div).css("position", "absolute");

    //Set the left in the window coords that match the images coords
    $("#"+div).css("left", window_x+"px"); 

    //Set the top to match the images coords
    $("#"+div).css("top", window_y+"px");
}

You would use the function like this:

place("logo_text_div", 44, 100, 800, 600);

You can modify the code so it uses Ceil, you would get the coords shifted to the right. Or you could round the window_x and window_y some other way so you get the preccission you want.