CODEWITHSUNDEEP
htmlcss
Davood Kazemi
Davood Kazemi

Reputation: 105

How to use actual text over SVG image and make its place fixed?

I have 9 boxes in my Wordpress website and I built them with svg images (Link). Even texts are not actual texts. I want to rebuild the boxes and use actual texts in each box. Obviously, I want to place the text in a way that doesn't change in any screen size, Using custom CSS.

I only could build the blue rectangular button with actual text and couldn't build the text part and discount label with actual texts (see the link above).

I want to rebuild this with actual texts

Generally speaking, I want to know how can I position something depend on another element. In this case the texts' positions would be depended on other parts of the box. The texts should preserve their position and shape in every screen size.

Upvotes: 0

Views: 1320

Answers (2)

ChalanaN
ChalanaN

Reputation: 462

First add these styles to your div.ServicesPageBox

display: flex;
justify-content: center;

Then wrap the svg inside that div.ServicesPageBox with another div and set these styles to that div

position: relative;

Next put your text inside that div and make them

position: absolute;

Then control the position of text with top and left. The position of text is now relative to the svg. You can also add z-index: 10; to your text to make sure that's on top of svg

Upvotes: 3

Jon Christie
Jon Christie

Reputation: 54

Seeing your code would help diagnose the issue... one thought I have is using z-indices (give the text a z-index of 10 and the images a z-index of 0, then % or em or fr spacing options to align them accordingly.

Upvotes: 1

Related Questions