Forum Moderators: not2easy
Don’t know if I can get help with this, but I thought I’d give it a try ;-)
The challenge I’m facing stretching a vertical image in div, with dynamic content in front of it (with z-index).
The div surrounding the text contains an image (<img>) that stretches according to the amount of content.
There is more explanation on the linked page.
See example: <snip>
The page works perfectly in Firefox and IE8, but fails to comply in Safari. Grrr
I have worked on this for a couple of days and came up with the solution to add overflow:hidden to this div, which at least is a solution to use the code in Safari without having to worry if the user can still read the text.
The reason I’m trying to find a solution for this is because I believe there a lot of designers looking to find a solution to this.
It creates a lot of new possibilities when this would work.
Can anyone help me or does someone know a way to accomplish the exact same thing?
Please let me know if you need more information…
[edited by: swa66 at 11:22 am (utc) on Nov. 22, 2009]
[edit reason] No links please, see ToS and Forum Charter [/edit]
is this a vertical repeating image? and would it not work if the image was placed as background image on the div, therefore removing the need for positioning/z-index?
Generally if the image is considered a presentation image, it is considered best practice to remove it from the HTML and place it in the CSS..
or am I misunderstanding? if so can you post some pseudo code which would mock up what you're trying to achieve a solution for
Suzy
With some designs, you can also have the background image fade into the background color removing the need for a max-width, max-height.
Or if it works better, repeat will greatly reduce your image size and page load.
There's a technique called "CSS sliding doors" you may also want to research, this gives you a pre-defined left side, and an expandable right side.
Here's an example:
<style>
#body {
background: url(img.gif) /* this image is 1500px wide and tall */ no-repeat left center;
max-width: 1500px;
max-height: 1500px;
}
...
<body>
<div id="body">
<p>content content</p>
</div>
...
