How to position image as shown in design file?
Hi, I wanted to know how it's possible to position my image as shown in the screenshot attached?
Code: https://jsfiddle.net/x2dm3qen/7/
14 Replies
So that's how it looks like in the design ^
And here's mine:
You could see the purple doesn't not extend to outside of the screen
Is the gradient diagonal bar it's own image, or part of the one with the girl in it?
It's with the girl yep
I used grid there too
In the real world, I'd ask the designer for separate assets, but I know this is from Frontend Mentor, so not really a choice 🙂
First thoughts would be to set a height (or min-height) on the image, so that it takes up the right amount of space vertically. It'll have to be pretty big, 'cause even right now it looks like the height might be
100%. Making that big enough will have the image get wider.
Depending on how you set things up, this could have some other impacts as the image gets wider, but hopefully it just overflows outside it's parent without issue
You'll also have to have an html { overflow-x: hidden; } since the image needs to overflow off the side of the page.
If they were separate assets, I'd just position the diagonal thing with position absolute 😄Oh okay, thanks! I'll try those out. Also, yep, from Frontend Mentor
Yeah, true haha 😅
Wow you got an answer straight from the KING himself! 👑
Tho @Alza i don't like to be that guy that points out every little thing but you've tagged this post wrong imo. It should only be CSS tag. Perhaps not HTML but definitely not semantic HTML
Oops, my bad then 😅
how do i use two diff image one for desktop and one for mobile am done with the mobile but i don't know where to place the the desktop img i use mediaQ and the picture two both the desktop and the mobile
Thanks in advance
Are they set as CSS background images? Or are those img tags in the html?
@croganm html tags
Look into the picture element, it lets you set different sources for immerse with a media attribute
Someone else asked about this earlier this week, so I'm covering it on my Short this week😅