CODEWITHSUNDEEP
htmlcss
almk
almk

Reputation: 163

How to position an element relative to the background image width

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.

Upvotes: 3

Views: 2497

Answers (1)

web-tiki
web-tiki

Reputation: 103790

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

Upvotes: 3

Related Questions