Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: CSS: Taustakuvan asettelu

Sivun loppuun

joah [18.04.2014 14:35:37]

#

Hei!

Haluaisin, että sivustoni taustakuva olisi 100% käyttäjän ikkunan leveydestä. Helppoa: background-size: 100%;

Mutta kun kuvani on taivas, jossa alhaalla on puita, haluaisin, että kuva olisi aina "alhaalla". Eli tätä haen: http://fpaste.dy.fi/sXu/disp. Eli vaikka olisi eri selain tai selaimen koko, se kuva aina kohdistaisi alas. Puut/alaosa näkyisi siis aina. Jos yritän tehdä näin:

body {
    max-width: 100%;
    min-height: 100%;
    background-image: url(images/hdimage.jpg);
    background-size: 100%;
    background-position: bottom auto; // Tai auto bottom
}

Tulee: http://fpaste.dy.fi/sNO/disp

Miten saisin tuon ensimmäisen kuvan tapaisen toimimaan? Olen tehnyt sen siten, että annan background-positionille auto ja 10%, mutta se ei sitten skaalaudu oikein muissa selainkoissa.

Kiitos jo vastauksista!

vesikuusi [18.04.2014 14:54:58]

#

Haetko kenties

background-repeat: no-repeat

joah [18.04.2014 15:00:03]

#

Ei toiminut tolla. Ainoastaan "nosti" sitä vähän, muttei kuitenkaan kohdistanut ihan alas.

vesikuusi [18.04.2014 15:04:59]

#

En ole varma ymmärsinkö, mutta tarkoitatko, että haluat kuvan olevan aina näytön kokoinen ja samassa kohdassa suhteessa näyttöön?

Lisäys:

<html>
	<head>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			html {
				height: 100%;
				width: 100%;
			}

			body {
				height: 100%;
				width: 100%;
				background-image:url('http://fpaste.dy.fi/sXu/disp');
				background-repeat: no-repeat;
				background-size: 100% auto;
			}
		</style>
	</head>
	<body></body>
</html>

Mites tuo?

Lisäys:

Eli, ensinnäkin sulla on tuolla vain min-height ja max-width bodyssa. Ne määrittää vain raja-arvot, ja sinä luultavasti haluat määrittää tarkat arvot (width: 100 %;).

Toiseksi body on html-tagin sisällä, jonka korkeus ja leveys on myös laitettava sataan prosenttiin. Ne ovat suhteelliset käyttäjän ikkunaan nähden.

joah [18.04.2014 15:21:45]

#

max-width estää tekstin/muiden elementtien ylipursuamisen. min-height hoitaa homman, jolloin footerin voi laittaa alas.

Lisäys: Taustakuva on suurempi kuin näyttö. Haluan, että se ei "aloittaisi" lukemaan kuvaa ylhäältä ja vasemmalta. Haluaisin että se alottaisi alhaalta.

vesikuusi [18.04.2014 15:33:26]

#

Aa joo sori tämä ihme säätäminen :D
Mites tämmönen

<html>
	<head>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			html {
				width: 100%;
				height: 100%;
			}

			body {
				width: 100%;
				height: 100%;
				background-image:url('http://fpaste.dy.fi/sXu/disp');
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-position: center bottom;
			}

		</style>
	</head>
	<body>
	</body>
</html>

Lisäys:

Tässä on tärkeää

Height:n laitoin vain, koska sivulla ei nyt ole sisältöä.

groovyb [18.04.2014 17:31:37]

# 

html {
        background: url('http://fpaste.dy.fi/sXu/disp') no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Esimerkki (jsFiddle)

joah [19.04.2014 13:57:38]

#

Kiitos vesikuusi, toimii kuin unelma!

Groovyb, en osannut vaan käyttää tota, koska taustakuvaa ei näkynyt...

groovyb [19.04.2014 17:20:28]

#

et nähnyt esimerkin linkissä taustakuvaa? (tässä kokoruudussa oleva esimerkki)

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta