CODEWITHSUNDEEP
htmlbackgroundresizestretchtile
nicesprite
nicesprite

Reputation: 1

Background resize to fit content?

Hey all! I'm in the process of setting up my website and I'm trying to find a way to have my background image (or any image) to re-size it self according to content.

My background consist of 4 corners, 4 edges and a fill for the middle. Is it possible to have it re-size? Example of how i want to use it:

My background image currently supports about 4 paragraphs and im at the bottom. What if i want 7-8 paragraphs? Will i have to manually remake the image to be longer or can i have it take the left edge, right edge, bottom corners and bottom edge pictures and and it down? I really hope that made sense haha.

I don't want to stretch the image because it loses its resolution and looks terrible.

Thanks for your time.

Upvotes: 0

Views: 949

Answers (2)

keepitterron
keepitterron

Reputation: 1052

You can do this using css3 properties. Not all browsers support this yet!

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

https://developer.mozilla.org/en/CSS/-moz-background-size

Upvotes: 0

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385204

No.

Make the corners and edges separate images. Top/bottom edges should be tileable horizontally; left/right edges vertically.

Then have a "middle" image as your background that either tiles or is scaled in some other way. This answer may help you there.

Upvotes: 1

Related Questions