Resizing an image to a special size?

[[Nicolas]]

Hi. I have some blank cards... I need an image to resize to fit it perfectly. Here's the image:

The white space is where an image needs to go. Should or could I do this in JS? Or should this be in CSS? I'm hoping for JS though... But anything is fine.

[Nile]

CSS would probably be the best idea for this. Make a div that looks something like this:

div.basic_frame {
   background: url(basic_003.jpg) no-repeat;
   width: 362px;
   height: 499px;
   position: relative;
}
div.basic_frame img {
   position: absolute;
   top: 63px;
   left: 41px;
}

And then html:

<div class="basic_frame">
   <img src="picture.jpg" />
</div>

[[Nicolas]]

It won't work... I try adding a different image and it doesn't work. I need it to curve like in the image.
EDIT: And btw, can this be moved to the CSS part of the forum? I don't know how. Sorry.

[Nile]

In that case, you can use the following code:

<style>
div.basic_frame {
   position: relative;
   width: 362px;
   height: 499px;
}
div.basic_frame div.frame {
   background: url(basic_003.jpg) no-repeat;
   width: 362px;
   height: 499px;
   position: relative;
   z-index: 2;
}
div.basic_frame img {
   position: absolute;
   top: 63px;
   left: 41px;
   z-index: 1;
}
</style>
<div class="basic_frame">
	<div class="frame"></div>
   <img src="image.jpg" />
</div>

But you have to make the blank space of basic_003.jpg transparent

[[Nicolas]]

No, it doesn't work either
It just comes up with the image, not the template.
I made it transparent in Paint.NET and saved it as a gif and changed the CSS bg url to the new image, and it still won't work.

[Nile]

Can I have a link, please?

[[Nicolas]]

Yeah, sorry. http://dbanimefree.x10.mx/Epkmncrdgen.html

[Nile]

This code won't work without the wrapping div, change your html to:

<div class="basic_frame">
	<div class="frame"></div>
   <img src="nothing.gif" />
</div>

[coothead]

Hi there [Nicolas],

check out the attachment to see a working example.

coothead

[[Nicolas]]

Thanks guys! This'll work great!