Sticking an image to the corner of text

Design help General
1

Hello,

I am struggling to stick an image to the corner of a text block. I want the headline to stay centered above the paragraphs below it, and I still want the text to be responsive. I don’t have a read-only link, but I’ve attached mocks of what I am looking for. Thank you sooo much in advance for your help!

I’ve tried a lot with absolute positioning, but it gets ruined once the text adjusts at smaller breakpoints. Is there a way to stick it to the corner of a word like in my example?

image
image704×1482 50.4 KB

image
image1300×1440 75.3 KB

2

Absolute positioning is the technique you want. You need to share your readonly designer link to that page for anyone to help with specifics.

Generally you’d make the wrapping DIV that contains the image and text relative, and then the image absolute, with 0 top and left position. That would stay the same through all breakpoints. You might need to adjust the container top padding and/or the image size at different breakpoints if you are trying to tweak the layout responsively.

3

hi @Gwenna second option is to use pseudo selector ::before or ::after


.title{
font-size: 32px;

&::after{
    content: ""; /* ::before and ::after both require content */
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    z-index: -1;
    background-image: url( 'path/to/your/image.jpg') no-repeat center center/cover;
}

there ia many articles about “how to”

both of these two solutions are valid , it all depend what you will need to use.

4

Maybe not as elegant as Stan and Michael’s options, try a backgound image in your text box and adjust the padding to suit.