Search code examples
htmlcssimagebackground

html - how to make images stay on certain part of background

I have a background image with the size in CSS being cover, so it resizes as the browser window resizes. but when i place images, how can i position them so that they stay in a certain place according to the background? i tried using left:...px and top:...px and i know why that isn't working, because when i resize the window it will stay at that position away from the left and top, but what is the solution? i want the images to resize proportionally to how big the window/background is and stay in a certain location on the background

Solution

  • use absolute positioning with %'s

    HTML:

    <div id="foo"></div>

    CSS:

    #foo{
    position:absolute;
    top:10%;
    left:20%;
}

    For the position you can use absolute, fixed, or relative depending on what suites best.

    Fixed: relative to browser window;

    Relative: relative to natural position

    Absolute: relative to first positioned ancestor