CODEWITHSUNDEEP
jquerycss
Kasrak
Kasrak

Reputation: 1561

Positioning elements via background - CSS-JQuery

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

Upvotes: 0

Views: 126

Answers (2)

Hwansoo Kim
Hwansoo Kim

Reputation: 286

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

Upvotes: 0

Cipi
Cipi

Reputation: 11343

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.

Upvotes: 1

Related Questions