Keskustelu: Nettisivujen teko: CSS ja taustakuvan venytys

Olen tässä yrittänyt jonkinlaista ulkoasua vääntää, ja olen törmännyt erääseen ongelmaan kun yritän tehdä laatikon ympärille siistit reunukset.

Olen toteuttanut reunukset niin, että olen piirtänyt ylä- ja alareunaa varten kuvat, jotka lisään divin alussa/lopussa img-tagilla attribuutilla (oikea sana?) width="100%" jolloin ne näkyvät siististi ja oikein. Sen sijaan kun yritän saada divin molemmille reunoille myös itse piirtämäni palkit, ei homma oikein tuppaa onnistumaan.

Irkissä minulle neuvottiin että tekisin taustakuvan, jossa on ne reunat piirrettynä. No, näin sainkin ongelman ratkaistua jotenkin (taustakuva joka näytetään repeat-y:llä, taustaväri läpinäkyvä). Tämä kuitenkin näkyy oikein vain, jos ko. divi on yhtä leveä kuin kuvani (ja en halua määrittää leveyttä pikseleinä eri resoluutioiden takia). Miten saisin tehtyä niin, että jos divin leveys on hieman suurempi/pienempi kuin kuvani, niin kuva venytetään koko divin kokoiseksi.

Taustakuvan liitän diviin ihan yksinkertaisesti CSS:llä, tässä pätkä koodia:

background-image:url(navitausta.png);
background-repeat:repeat-y;
background-color:#FBFDFF;

Toivottavasti tuli selitettyä riittävän hyvin. Googlea olen yrittänyt, mutta mitään järkevää ei ole löytynyt. Ja jos tämä ei CSS:llä suoraan onnistu niin miten ongelmaa pitäisi lähestyä?

kuvan resoluutio pysyy samana oli sitten näytön resoluutio 800x600 tai 1280x1024 joten se toimii jos määrität vain opikseleinä.. jos nyt oikein ongelman ymmärsin

Eikö reunuksia voi tehdä border-ominaisuudella? Siis tyyliin:

border: 1em solid #707060;

Matso kirjoitti:

kuvan resoluutio pysyy samana oli sitten näytön resoluutio 800x600 tai 1280x1024 joten se toimii jos määrität vain opikseleinä.. jos nyt oikein ongelman ymmärsin

Tässä nyt tarkoitettiin sitä, että ei haluta rajoittaa ulkoasua tietylle resoluutiolle sopivaksi. Järkevämpää on käyttää suhteellisia kokoja, jolloin sivusto skaalautuu aina selaimen koon mukaan.

Heikki: Itse tahtoisin kovasti myös kyseistä ominaisuutta, mutta ikävä kyllä se ei ole CSS2:ssa mahdollista. KeKimmon vinkki olisi ainakin sinun tapauksessasi pätevä vaihtoehto.

Kiitoksia vastauksista...

Tosiaan halusin määrittää divin leveyden prosentteina jotta se näkyisi suhteessa oikean kokoisena eri resoluutioilla / eri kokoisilla selainikkunoilla.

Luultavasti minun pitää sitten tyytyä tuohon border-määritelmään, noilla kuvilla olisi vaan saanut hienompaa jälkeä aikaan. :(