santa hat to text how ?

1st image is BIG HAT for desktop mode and tab mode 2nd image is for Mobile mode. how can i give this hat to this text ? i have export it as svg in two files 1 is big and second is smol. this is for my own portfolio site as i'm still designing it so i want people to see that portfolio is under construction.
No description
No description
15 Replies
Hidi_
Hidi_4mo ago
Can you not just have those images fully as images, not text with only the hat as an image? You can just use an alt text for people using screen readers. If you want to do that, just change the image in a media querry that has the width u want for mobile
snxxwyy
snxxwyy4mo ago
Wrap the 0 in a span and use position absolute for the hat
peterpumkineaterr
peterpumkineaterrOP4mo ago
i didn't understand any of it please use english i have cold and my head is not working
Hidi_
Hidi_4mo ago
body {
height: 100%;
margin: 0;
}

.not-found {
background-image: url('not-found-big.svg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

@media (max-wdith: 768px) {
.not-found {
background-image: url('not-found-small.svg');
}
}
body {
height: 100%;
margin: 0;
}

.not-found {
background-image: url('not-found-big.svg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

@media (max-wdith: 768px) {
.not-found {
background-image: url('not-found-small.svg');
}
}
I think this should work if you have 2 SVG-files. 1 for the big screens and 1 for the small screens. Obviously the SVG-files should contain both the text, santa hat and black background snxxwyy solution will also work ofcourse
peterpumkineaterr
peterpumkineaterrOP4mo ago
Can’t i do text as text and santa hat as svg ?
Hidi_
Hidi_4mo ago
That is possible, just more effort
peterpumkineaterr
peterpumkineaterrOP4mo ago
Ohh damn i understood this now Please elaborate So where to put hat svg ? Inside the span ?
Hidi_
Hidi_4mo ago
U will need to do with the span, takes more effort in my opinion
MarkBoots
MarkBoots4mo ago
https://codepen.io/MarkBoots/pen/BaXmyGE you'll have to play with the width/height and top/left to fit your own svg I use em-units so it scales with the current font-size
MarkBoots
MarkBoots4mo ago
No description
peterpumkineaterr
peterpumkineaterrOP4mo ago
damnn thanks mark you helped a lot before i did this
peterpumkineaterr
peterpumkineaterrOP4mo ago
No description
peterpumkineaterr
peterpumkineaterrOP4mo ago
why is there
position: relative;
&::after{
position: absolute;
position: relative;
&::after{
position: absolute;
?
Alex
Alex4mo ago
An element with position:absolute is positioned relative to the nearest positioned ancestor. Setting position:relative on the main element lets you position the pseudoelement relative to it; without it, it would be positioned relative to the root element, so it would be in the top left of the whole document rather than the span.
peterpumkineaterr
peterpumkineaterrOP4mo ago
that clarify's it thanks i appriciate it. UPDATE : i finished that site and i will appriciate the help

Did you find this page helpful?