How can i spill a picture out of the div in IE using CSS?

Question

i have a container block thats aligned to the middle of the page with a width of 900px. the footer div is inside the container div and is at the bottom. i added a picture bigger than 900px so it would spill out of the container to the right side "its just some floral design"

now in IE, this doesnt happen.....
it stretches all the containers to keep the picture inside of it. i dont want that. i want the extra part of the picture to spill out as if this design is over the whole container box.

any suggestions?

Answer 1

Ah, the joys of IE in general and the perils of quirks mode rendering. When I load your page into IE, it defaults to quirks mode. When I force standards compliance, using the developer tools of IE8, the spill you want and expect occurs. Your doctype spec looks good, but your page does not validate by your declared doctype. Try fixing your errors, and see whether that leads IE to use standards mode.



Added:

This problem was characteristic of IE6. It was supposed to repaired as of IE7.



In IE6, there was a "stupid IE trick" that fixed the issue. The outer container, the one being stretched is formally declared to be overflow:hidden, and the direct child that was causing the stretching is declared to be position:relative without a top or left.



However, I note again that when I force IE to use standards mode, the proper, expected rendering happens. I still think you need to determine why IE7 and -8 are falling into quirks mode, even tho' you've declared a strong doctype.



Correction:

Not enough coffee moment....outer container should have been "hidden" not "visible."

Answer 2

Dreamweaver is inappropriate, besides to mention you ought to move to the code window to do that. It's code you're speakme approximately. To be sincere, simpler in a ordinary HTML editor, and even notepad, than a hulking high-quality frontend that attempts to take over. Anyway. Put this within the field among head and head someplace (or simply upload the bit approximately the img on your present stylesheet) img { margin-proper: 15px; } /style In the bit among body and body, wherein you desire it to look, positioned this: div div Could it's a lot simpler? You could be good told to quit utilizing Dreamweaver as a studying software. It isn't a studying software. It is a creation software. It will without doubt preclude you if you're studying code, as you'll attempt to use it as a shortcut and it is rather a lot now not that.

Answer 3

No code given or link to page so just a guess. Try putting the image in the body tag instead of the div as a background image.



Background Image Code:



For the body tag example:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) no-repeat center scroll;

}



That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.



For a tiled image, change to:



body {

width: XXpx;

height: YYpx;

margin: 0 auto;

background: #fff url(image_name.jpg) repeat top left scroll;

}



Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".



Ron

Answer 4

You must set the size of image !



you can also add a style... if you want !