How to position an element relative to the background image width


Tags: html,css,css3

Problem :

Note: I do not have JS access. This must be done with CSS.

I have a background image (850 x 1080) positioned at the bottom right of the screen. I have the image scaled so that it takes up 38% of the width:

background-position: right bottom;
background-size: 38% auto;
background-attachment: fixed;

Now I want to position another element such that it always, regardless of the screen size, lines up with a certain part of the background image. How would I go about that? I currently have it set at a set distance away from the right and bottom edge, but this is not what I want:

height: 220px;
width: 155px;
bottom: 400px;
right: 400px;

My code can be found here, and the part I'm trying to position is in the definition of :hover + .hide (line 12). The page I'm trying to customize is my MyAnimeList profile, where I'm trying to line up the cover art with the edge of the red sword-looking thing.



Solution :

As the background size changes according to the width of it's container, you can use percent margin to position the element. Percent Margins are calculated according to the width of the container, even top/bottom margin (see here).

example :

:hover + .hide{
    position:absolute;
    bottom:0;
    right:0;
    margin-bottom:20%; /* tune this */
    margin-right:20%; /* tune this */
}

Here is a DEMO


    CSS Howto..

    how to go bottom of a website like back to top using javascript?

    How to Include marker in SVG Blinking Rectangular or circle Border image in google maps

    How to capitalize first letter with JSTL/CSS?

    How to detect MAC OS' inverted color mode in javascript / css?

    How to order properties in a declaration block? [closed]

    Hide/show block with CSS

    How to get uncompressed css output while using LESS(less-watch-compiler.js)?

    Keyboard Showed messed up elements' position

    How to re-size image in wordpress template

    How can I use jQuery to hide or show table rows based on asp.net role?

    How to get divs and anchors stacked on top of each other with the same width

    How to make the margins and border in a mobile website invisible html/css

    Single page wordpress template. How to create new section in css

    How to prevent the jump during css transition?

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    How to make overflow blocks working well ()

    How to create a horizontal calendar with nested lists?

    How to import CSS from node_modules in webpack angular2 app

    How can I handle XML namespaces in CSS Selectors or in jQuery?

    How do I make an entire
  • element a link?
  • How make a fixed element be on top of another position fixed element

    css: how to get the browser's default font family

    Chrome doesn't show the favicon

    How can I use CSS to show and hide multiple elements at once?

    How can I find the CSS3 rotation of an element?

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    how i can fit text to an image with css

    How to call CSS from JavaScript

    How to change a form's CSS class without affecting FormController.$pristine?