I need to stretch an image to be the background as a div. It's a small image and i need it to stretch all the way across and up and down in the div. how do? do this

2 answers

joneff 28

There is this CSS 3 property to do so, but it's even less available than border-image property.

You could, however, "simulate" this property rather easy -- just absolutely position this image within the containing DIV and set the width and height accordingly.

I will attach a short snippet as soon as I have a free second. [Edit: Added].

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    <title>Simulate BG width</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    #test {
        margin: 2em auto;
        padding: 10px;
        width: 80%;
        background: #f0f0f0;
        position: relative;
        z-index: 1;
    #fake-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;

<div id="test">
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    <img src="border.png" alt="#" id="fake-bg" />


There are few unwanted quirks, like being able to select the image, but this is as far as you go with traditional approaches.

Hope this helps.

Answered over 7 years ago by joneff

CSS2 only allows images to be tiled. There is likely to be support for background stretching in CSS3, but there is no support yet. You could make it a foreground image of an element and stack another element in front of it, subject to the usual proviso that stretched images usually look bad.

Answered over 7 years ago by Richard Grevers