Help Putting an image in a box

[kaninchen]

I know this is super simple, but I cannot manage to do this. I'm trying to teach myself by just jumping into it but I'm stumped. Below is basically what I'm trying to do.

I want to align a photo to the left of a box and have it touch all three sides. I might be confused with my layering, so I'm also wondering if it must be contained within the outermost border tag? If you start another border tag outside, can it somehow overlap the previous one? I hope that makes sense.

My issue is that the photo fills the entire box, and sometimes tiles itself (?) and is overall too big and a hot mess. I don't have a code to share I'm just trying to figure this one element out. My method as of right now is making the outside box, and then making the image a box inside of it, so using the "background" tag. It never touches the sides though, and I've tried 0 padding, etc.

 

[Uxie]

just from the description alone, it sounds like you're dealing with the pre-set padding on background tags, but since you've tried it + you don't have a code to show, i'm not sure how to advise besides offering you a code snippet that does work (hopefully) (๑˃ᴗ˂)ﻭ

[bg=0; padding:0; height:180px; width:320px; background:red;][bg=0; padding:0; height:180px; width:130px; background: URL('https://i.pinimg.com/236x/97/21/2f/97212f2703edfc13714f226c1d6b9411--wallpaper-kawaii-moomin-wallpaper-iphone.jpg') 50% 100%; background-size:cover;][/bg][/bg]

as for your question -- yes! if you want your photo to be within your big box, you'll need to enclose it within like i've done above. there is a way to overlap the previous one through use of margin/positioning,,

Spoiler: example

with margins:
[bg=0; padding:0; height:180px; width:320px; background:red;][/bg][bg=0; padding:0; height:180px; width:130px; background: URL('https://i.pinimg.com/236x/97/21/2f/97212f2703edfc13714f226c1d6b9411--wallpaper-kawaii-moomin-wallpaper-iphone.jpg') 50% 100%; background-size:cover; /*the shift upwards*/ margin-top:-180px;][/bg]

with positioning:
[bg=0; padding:0; height:180px; width:320px; background:red;][/bg][bg=0; padding:0; height:180px; width:130px; background: URL('https://i.pinimg.com/236x/97/21/2f/97212f2703edfc13714f226c1d6b9411--wallpaper-kawaii-moomin-wallpaper-iphone.jpg') 50% 100%; background-size:cover; /*the shift upwards*/ position:relative; top:-180px;][/bg]

you'll also see this ugly space here, that's because the position:relative; is actually only shifting up the image of the element, not the actual element. useful in some situations but not so much in this one!

but i would advise against it based on what you're trying to achieve here and because using work-around methods like this tend to not do so well across browsers/devices (￣▽￣*)ゞ doing these work-arounds basically is the same as hovering your item over the box instead of putting it within, and for the layout you're trying to achieve specifically, it'd be easier if you pack everything within the box. if that makes sense!!!

 

[kaninchen]

thank you so much that's exactly what i meant!! this helps me understand it a lot more as a total newbie, thanks again!!