CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CLiown
CLiown

Reputation: 13843

HTML DIV as the Background of another DIV

Is it possible to place 1 DIV inside another DIV and have the DIV inside have a larger width and height than the DIV it is contained within?

Sounds like a riddle....

Basically I want to have a container that the user can set the width and height of. They will have also selected and image, cropped it and resized it using jQuery. The image will be the background of the container, however due to the fact that the background image could be made bigger than the container I want it to be possible for the background to be a DIV that can expand beyond the height and width of its container - To crop the image if you like.

Do able?

Upvotes: 0

Views: 901

Answers (3)

clairesuzy
clairesuzy

Reputation: 27644

Yes, if I'm understanding you correctly

the container would be relatively positioned, the div "inside" would be absolutely positioned inside it - the absolute positioning co-ordinates and getting the image centered would be done something like this, at default, 

#inner {
 position: absolute;
 top: 0 ; 
 left: 0; 
 right: 0; 
 bottom: 0;
 background:  url(theimage.jpg) no-repeat 50% 50%;
}

this should center the image in the user sized container

then the "cropping tool" would be able to manipulate the co-ordinates (in an equal measure I presume) either + or - those 0 values, -, negative, ones will allow it to expand outside the "outer" container

Upvotes: 1

Mark Steggles
Mark Steggles

Reputation: 5573

A background image will be 'cropped' by default. For example, if I have a 500px by 500px div and then I put a 1000px by 1000px image as its background then it will show the top left 500px by 500px of that image as a background. I could set the background image to be centered like so:

background:transparent url(image.png) no-repeat center;

Upvotes: 0

S L
S L

Reputation: 14318

$('<div>').attr('id', 'innerdiv').appendTo($('#div'));

CSS

#div{
    height: 100px;
    width: 100px;
    background: green;
}

#innerdiv{
    height: 200px;
    width: 200px;
    background: red;
}

HTML

<div id="div"></div>

http://jsfiddle.net/bKetM/

Upvotes: 0

Related Questions