Absolute position of an element that stays in place when scaling

[toolman]

Hi there,

I have the following fiddle:

Edit fiddle - JSFiddle - Code Playground

I am trying to display an image to the right hand side of the header text like this image: ( Ihave just added text there for now “BLACK STARS”)

I have tried both relative and absolute positioning, but can’t seem to get the element to star next to the text when resizing the window/scaling/responsive.

Does anyone know how I can acheive this?

Thanks

[DaveMaxwell]

A div is display:block by default.

If you change the class to something like, it’ll be closer.

.stars-top-right {
    display:inline-block;
    position:relative;
    top: 1.25rem;
    right: -9rem;
}

Personally, I think you’d be better off using a span in the middle of the H1, then use the :after pseudo element, and playing with positioning there. I’d think that’d keep it better in line with what you want, but the code above gets it kinda close the hard way.

[toolman]

Many thanks!

I decided to use the after approach as you mentioned.

This was what I used:

content: “”;
background-image: url(…/images/stars-top-right.svg);
background-size: cover;
position: relative;
top: -315px;
left: 140px;
width: 90px;
height: 90px;
display: inline-block;

[PaulOB]

@toolman

This was what I used:

I would avoid relative positioning as that leaves a hole on the page which can clearly be seen if I add your code to the fiddle. Also if you resize the page the red box moves all over the place and is entirely dependent on what happens to the text above. e.g. id you resize the text smaller for mobile your positions will be all over the place.

I would add a span around the texts that says ‘WE DO’ and then absolutely position the stars in relation to that text and they will always stay in place and not leaves holes over the page.

e.g.

.stars{
  position:relative;
}
.stars:after{
content:"";
background-image: url(…/images/stars-top-right.svg);
background-size: cover;
position:absolute;
top:-3rem;
right:-2rem;
width: 90px;
height: 90px;
}

<h1 class="text-center brand-black"><span class="stars">We Do</span> etc…

You need to think ahead and make sure that you use a technique that is reliable and not built on magic numbers.

I do have a few comments (which I’ll keep to myself for now) about your use of absolute positioning for the main banner, the transforms to centre when flex can do that automatically and your fixed height of 100vh but I’m guessing this is just a demo fiddle anyway