Keskustelu: Nettisivujen teko: Kuvan venytys

Sivulla on div, jonka leveys pysyy aina samana mutta height vaihtelee sisällön mukaan. Eli min-height on esimerkiksi 150px ja width 150px. Miten saisi background-imagena olevan 150*150px kuvan venytettyä sen mukaan kun divikin venyy? Pikainen googletus antoi kyllä vähän suuntaa, että aika mahdotonta ollaan hakemassa. Vai onko joku tietoinen millä tavalla hommasta voisi suoriutua? Koska kyseessä on liukuvärikuva, homman voisi tietysti toteuttaa myös php:llä. Osaisiko joku neuvoa miten php:llä liukuväri taustaväriksi toteutetaan?

kun kerran kyseessä on liukuvärikuva, niin eikö se kannattaisi asemoida divin yläreunaan ja laittaa divin taustaväri liukuvärin alareunan väriseksi.

.mundivi{
background-image:url(liukuvari.jpg);
background-repeat:repeat-x;
background-position:top;
background-color:#00ff00;
}

No, onhan tuokin ratkaisu tietysti. Muttei tosin aivan se mitä hain takaa. Sillä divin venyessä se kuva ei tuolla tekniikalla veny eikä se liukuväri ole silloin tasaisesti. Olisiko joku muu tapa kenties?

Entä jos..

.mundivi{
background-image:url(liukuvari.jpg);
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

jos se nyt padding oli?

HellCome kirjoitti:

Entä jos..

.mundivi{
background-image:url(liukuvari.jpg);
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

jos se nyt padding oli?

<offtopic>
niin tai
.mundivi{ border:4px solid #ff00ff; }
mikäs se kysymys taas olikaan...
</offtopic>
padding ei liity tähän mitenkään, sillä voi määrittää etäisyyden sisällöstä reunoihin...

Äh, ei siis tietenkään noin - tyhmä minä. Ajatus oli tietysti siinä, että ei käytetä taustakuvaa, vaan kuvaa jolle annetaan etäisyys divin reunoista 0px.

Herra Stu Nicholson näyttää kikkailleen koko dokumentille muuttuvankokoisen taustakuvan, mutta ilmeisesti se toimii vain 100% x 100% -kokoisena bodylle.
http://www.cssplay.co.uk/layouts/background.html
Katso nyt kumminkin, jos vaikka jotain viisastut.

Itse kyllä suosittelisin pistämään sen taustakuvan joko divin ylä- tai alalaitaan, kuten Lebe80 suositteli, tai keksimään jotain muuta. En sitten tiedä, jos joku tämän tyylinen php-härpäke toimisi:
http://www.liftari.org/taustaliftarit/rotate.php
ja tuolla siis käytössä:
http://www.liftari.org
Se kyllä edellyttäisi divin pikselikorkeuden tietämistä, jolla perusteella sitten muodostettaisiin kuva, mikä taitaa olla aika mahdotonta.

Jos divin korkeus vaihtelee vaikkapa välillä 150px-300px, voit tietenkin tehdä 300 pikselin korkuisen taustakuvan, josta sitten näkyy vain osa, jos divi on matalampi. Tuohan näyttäisi ihan komealta, jos vaikka liimaisi sen kuvan alkamaan alareunasta ja suunnittelisi sivun värit sitten sen mukaan.