Taustakuvan tekeminen

Discussion:

(too old to reply)

Osmo Saarikumpu

2009-10-05 15:03:33 UTC

En nyt kuolemaksenikaan muista, kuinka kuvasta saadaan tehtyä
taustakuva, joka ei mene aivan kaakeliksi.

CSS-tyyliehdotuksilla. Ks. CSS1-ominaisuusreferenssiä:

http://weppipakki.com/css/index.htm

kohdasta "Värin ja taustan ominaisuudet" kaikki mikä alkaa sanalla
"background" (tausta).

Jotenkinhan sitä piti käsitellä jollain kuvankäsittelyohjelmalla, jolla
kuvaa saa "siroteltua" sivun taustakuvaksi.

Kuvankäsittelyohjelmaa tarvitaan vain mikäli kuvaa pitää jotenkin muuttaa.

Liitteenä kuva, josta yritän taustakuvaa tehdä.
Pitäisikö sitä ensin
a) vaalentaa
b) muuttaa kokoa?

Vaikea sanoa, koska tuo kuva ei tule perille (nyt ollaan USENETissä).
Laita se testisivullesi tavallisena kuvana, mikäli tarvetta vielä löytyy.

http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html

Vautsi, ei validointivirheitä! :)

--
Yst. terv. Osmo

Harri Juntunen

2009-10-05 16:01:49 UTC

Permalink

"Osmo Saarikumpu" <***@weppipakki.com> kirjoitti
viestissä:4aca0a94$0$6254$***@news.fv.fi...

http://weppipakki.com/css/index.htm

kohdasta "Värin ja taustan ominaisuudet" kaikki mikä alkaa sanalla
"background" (tausta).

Kuvankäsittelyohjelmaa tarvitaan vain mikäli kuvaa pitää jotenkin muuttaa.

Liitteenä kuva, josta yritän taustakuvaa tehdä.
Pitäisikö sitä ensin
a) vaalentaa
b) muuttaa kokoa?

Vaikea sanoa, koska tuo kuva ei tule perille (nyt ollaan USENETissä).
Laita se testisivullesi tavallisena kuvana, mikäli tarvetta vielä löytyy.

http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html

Kiitos, mutta weppipakin säädöt eivät näin äkkiseltään avaudu.
Nyt tuossa esimerkkilinkissä on taustakuva, jota haen, mutten vieläkään
keksinyt kuinka tuo kaakelointi hoidetaan pois.
Onpa tämä hankalaa...

Osmo Saarikumpu

2009-10-05 16:19:52 UTC

Permalink

Post by Harri Juntunen
Nyt tuossa esimerkkilinkissä on taustakuva, jota haen, mutten vieläkään
keksinyt kuinka tuo kaakelointi hoidetaan pois.

Nyt on vähän kiire, mutta näin lennosta, muuta:

<body style="background-image: url(KK_logo3.jpg);">

muotoon:

<body style="background:url(KK_logo3.jpg) no-repeat;">

Tuon taustakuvan paikkaa voi sitten tarvittaessa hienosäätää.

--
Yst. terv. Osmo

Harri Juntunen

2009-10-05 16:47:32 UTC

Permalink

"Osmo Saarikumpu" <***@weppipakki.com> kirjoitti
viestissä:4aca1c71$0$3881$***@news.fv.fi...

Nyt on vähän kiire, mutta näin lennosta, muuta:

<body style="background-image: url(KK_logo3.jpg);">

muotoon:

<body style="background:url(KK_logo3.jpg) no-repeat;">

Tuon taustakuvan paikkaa voi sitten tarvittaessa hienosäätää.

Kiitos paljon "verkkoenkeli"!
Alan jo päästä alkuun :)

http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html

Harri Juntunen

2009-10-06 11:46:10 UTC

Permalink

"Osmo Saarikumpu" <***@weppipakki.com> kirjoitti
viestissä:4aca1c71$0$3881$***@news.fv.fi...

< Nyt on vähän kiire, mutta näin lennosta, muuta:

<body style="background-image: url(KK_logo3.jpg);">

< muotoon:

<body style="background:url(KK_logo3.jpg) no-repeat;">

Hyvin toimii, mutta kolistelin vähän weppipakkisi sisältöä ja kokeilin
sieltä löytyneitä vaihtoehtoja:
Vaihdoin no-repeat -> repeat-y. Näin taustakuva tuli vasemmalle
pystysuunnassa:

http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html

repeat-x näyttäisi asettavan taustakuvarivin vaakasuoraan koko sivun
läpi - ei oikein hyvä.
Y-merkkaus näyttäisi ainakin minusta paremmalta, mutta kun vielä olisi
sellainen loitsu, jolla saisin määrättyä näkyvien taustakuvien määrää.
Nythän se on tiukkaa pystysuoraa "kuva kuvassa kiinni" -kuvajonoa.

< Tuon taustakuvan paikkaa voi sitten tarvittaessa hienosäätää.

Olenkin kokeillut scroll-prosenteilla asetella kuvaa sopivaan kohtaan
sivulle ja aika sopivahan se nyt on.
Yksittäinen kuva merkkauksella no-repeat;"> toimii mainiosti, mutta
repeat-y:llä saisi vähän "täyttävämmän" taustakuvan, jos kuvien määrän
voisi itse säätää.

Ethän hermostu - ei tämä ole kohtalon kysymys, vaan
harrasteluaskartelua... :)

t. Harri

Osmo Saarikumpu

2009-10-06 15:43:40 UTC

Permalink

Post by Harri Juntunen
Y-merkkaus näyttäisi ainakin minusta paremmalta, mutta kun vielä olisi
sellainen loitsu, jolla saisin määrättyä näkyvien taustakuvien määrää.
Nythän se on tiukkaa pystysuoraa "kuva kuvassa kiinni" -kuvajonoa.

Tässä voisi sitten käyttää kuvankäsittelyohjelmaa lisäämään esim.
alamarginaalia kuvalle. Mutta huomioi myös eri kokoiset näytöt, esim.
jos katson testisivuasi 800 x 600 kuvapisteisenä niin taustakuvaa ei näy
ollenkaan! Tämä johtuu siitä että ole asettanut asemointitaulukollesi
kiinteän koon. Tällaisesta olisi hyvä päästä eroon, sillä eräs Webin
nyrkkisääntö sanoo: aseta kaikki koot suhteellisesti.

Post by Harri Juntunen
Olenkin kokeillut scroll-prosenteilla asetella kuvaa sopivaan kohtaan
sivulle ja aika sopivahan se nyt on.
Yksittäinen kuva merkkauksella no-repeat;"> toimii mainiosti, mutta
repeat-y:llä saisi vähän "täyttävämmän" taustakuvan, jos kuvien määrän
voisi itse säätää.

Kokeile vielä background attachment -ominaisuutta:

http://weppipakki.com/css/css1/varitaus.htm#background-attachment

Ja background positionia:

http://weppipakki.com/css/css1/varitaus.htm#background-position

Post by Harri Juntunen
Ethän hermostu - ei tämä ole kohtalon kysymys, vaan
harrasteluaskartelua... :)

En toki. Jelppaisin mielelläni enemmänkin, mutta ikää paljon, eloa vähän :)

--
Yst. terv. Osmo

Meeri

2009-10-06 20:46:48 UTC

Permalink

Itse olen saanut paljon apua näiltä nettisivulta:
http://www.w3schools.com/css/css_background.asp

Meinasitko toistaa tuota logoa koko taustan täydeltä? Ettei menisi liian
levottomaksi, vaikka sirottelisitkin epätasaisemmin.

"Sirottelu" onnistuu tosiaan kuvankäsittelyohjelmalla. Teet palikan, jossa
on useampi logo mutta ei noin tasaisissa riveissä. Annat sitten sen palikan
toistua taustakuvana.

M.

En nyt kuolemaksenikaan muista, kuinka kuvasta saadaan tehtyä taustakuva,
joka ei mene aivan kaakeliksi.
Jotenkinhan sitä piti käsitellä jollain kuvankäsittelyohjelmalla, jolla
kuvaa saa "siroteltua" sivun taustakuvaksi.
Liitteenä kuva, josta yritän taustakuvaa tehdä.
Pitäisikö sitä ensin
a) vaalentaa
b) muuttaa kokoa?
http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html

Harri Juntunen

2009-10-07 12:17:24 UTC

Permalink

Post by Meeri
http://www.w3schools.com/css/css_background.asp

Hyvä sivu!

Post by Meeri
"Sirottelu" onnistuu tosiaan kuvankäsittelyohjelmalla. Teet palikan,
jossa on useampi logo mutta ei noin tasaisissa riveissä. Annat sitten
sen palikan toistua taustakuvana.

Ei vaan onnistu meikäläiseltä tuo palikan teko - on se kumma, vaikka
ohjelmia on useita.

Post by Meeri

http://www.kolumbus.fi/harri.juntunen/Kapu/Kapu.html