Problem: On a non-fixed width website, you want an image displayed across the width of the website, no matter how small or wide you make the window, but you want the left and right ends of the image to stay the same, not dissapear, such as rounded corners on both ends of the image.
Solution: Break up your original image into three parts, the left end, the right end and the middle. See the effect below, view the source code on this page to see how it was done.
Example 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis luctus, velit ac tempus iaculis, neque neque bibendum neque, vel porttitor metus libero a tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed cursus, dolor in sagittis posuere, diam nisi condimentum nulla, id aliquam augue nisi eu mauris. Donec vel urna. Pellentesque sit amet dolor nec libero placerat porta.
Example 1:
|
|||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis luctus, velit ac tempus iaculis, neque neque bibendum neque, vel porttitor metus libero a tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed cursus, dolor in sagittis posuere, diam nisi condimentum nulla, id aliquam augue nisi eu mauris. Donec vel urna. Pellentesque sit amet dolor nec libero placerat porta. |