CSS: How to pin/fix elements relative to the background?

Question

I make quest using twine. I need all the elements to behave as a single solid object when changing the screen size. Now their positions are independent of each other.

In Twine I can manage all objects through the tw-story (like .body) or use tw-passage for description(black on attached gif) and tw-link for answers(grey on gif)

tw-story
{
    background-image: url(../Images/TavernQuest/defentures_quest_back.png);
    background-size: cover;

    font-family: Arial;
    padding: 11% 19%;
    object-fit: cover;

} 

tw-passage {
    color: black;
    max-width: 50%;
    font-size: 1.8vw;
}

tw-link
{
   object-fit: cover;
   font-size: 1.8vw;

   color: grey;
}

How to make element position pin on background during window size change?

This is link to imgur gif that shows problem https://i.imgur.com/5IWS7rq.gifv

`background-size: contain` might help you. But just like @little_coder said, add some html here to understand where you are adding the background and where the texts are. — Towkir, Nov 19 '19 at 02:53
@little_coder I have only auto generated by Twine huge html code https://www.dropbox.com/s/55kt7yyoryzypd6/Gnomes.html?dl=0 — user3484857, Nov 19 '19 at 03:37
@Towkir contain will create pattern with background image https://i.imgur.com/tH9Pv63.png — user3484857, Nov 19 '19 at 03:44
@user3484857 So you want the background image to be responsive when resizing? — little_coder, Nov 19 '19 at 04:04
You can add `position: relative;` to the `tw-story` and add `position:absolute;` to `tw-passage` and then add value to top, left, right or bottom ot the tw-passage. — little_coder, Nov 19 '19 at 04:06

score 0 · Answer 1 · answered Nov 19 '19 at 04:23

Try this to add on your css code.

tw-story {
    background-image: url(yourimage);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial;
    padding: 11% 19%;
    position: relative;
    object-fit: cover;
}

tw-passage {
    color: black;
    max-width: 50%;
    font-size: 1.8vw;
    position: absolute;
    top: 50%; //change as desired
}

CSS: How to pin/fix elements relative to the background?

1 Answers1