Question

I thought this would be a pretty common question to look for in Google but I can’t seem to find an answer. Any help would be greatly appreciated.

I have a web page with full size re-sizable background image. Something like this:

html
{
    background-size:contain;
    background: black url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

On the image I have a section dedicated to a z-layer DIV that contains an image and another z-layer DIV that contains some text.

When I start re-sizing the browser window my page DIVs go crazy. They actually stay static to where they are while the page and its background image is getting smaller.

How can I make sure that my DIVs that contain images, links and text are always at the correct location no matter what user’s screen resolution is or no matter how do they re-size the browser. CSS? Javascript ? JQuery ? What’s the best way to do it ?

Thank you in advance !!!

p.s. Please let me know if something isn’t clear and a sample is needed.

Answer 1

Css is your best bet. You’ll want to set the div’s position to either fixed, absolute, or relative, depending on the case. fixed will cause the item to maintain it’s location when the user scrolls, while absolute will cause the item to scroll with the rest of the page, and will go wherever you tell it regardless of if it’s inside something else. relative gets it’s positioning relative to any parent container elements it’s inside of, or the window itself if it’s not inside another container element.

If it’s fixed or absolute, assigning a right will maintain it’s position aligned to the right of the screen if the user re sizes the window or depending on resolution, and left, top, and bottom will all act accordingly as well. You can assign them a percentage, which will also change accordingly per resolution or resizing. Or you can assign a hard coded value in pixels, centimeters, millimeters, inches, etc… Here’s a jfiddle as code example