Att ändra bakgrund - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.12

2020-10-31T13:12:15Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.12
Rad 51:		Rad 51:

	För att kunna sätta en bakgrundsbild måste du veta vilken [[URL]] som leder till bilden. Låt oss säga att det i vårt fall är det en fil som heter <code>bakgrund.jpg</code> som vi vill visa. Låt oss även säga att bilden ligger i samma katalog som det HTML-dokument som vi jobbar med. För att ange bakgrundsbilden skulle vi då kunna skriva så här:		För att kunna sätta en bakgrundsbild måste du veta vilken [[URL]] som leder till bilden. Låt oss säga att det i vårt fall är det en fil som heter <code>bakgrund.jpg</code> som vi vill visa. Låt oss även säga att bilden ligger i samma katalog som det HTML-dokument som vi jobbar med. För att ange bakgrundsbilden skulle vi då kunna skriva så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	body {		body {
Rad 57:		Rad 56:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Vi kan ta och sätta in detta i en exempelsida och se hur det blir att se ut, t.ex. så här:		Vi kan ta och sätta in detta i en exempelsida och se hur det blir att se ut, t.ex. så här:
	<codepen pen="zvxbBm" tab="css,result" height="400">		<codepen pen="zvxbBm" tab="css,result" height="400">
Rad 209:		Rad 208:
	Ett exempel:		Ett exempel:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	body {		body {
Rad 219:		Rad 217:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Ovanstående anger två bakgrundsbilder. Bakgrundsbilderna kommer att läggas bakom varandra i fallande ordning. I vårt fall blir alltså <code>bakgrund.png</code> att ligga framför <code>bakgrund2.png</code>. Den första bilden sätts till en höjd av 200px, medan den andra sätts till att ha en bredd på 400px. Därefter sätter vi så att den första bilden inte repeteras alls, medan den andra repeteras åt alla håll.		Ovanstående anger två bakgrundsbilder. Bakgrundsbilderna kommer att läggas bakom varandra i fallande ordning. I vårt fall blir alltså <code>bakgrund.png</code> att ligga framför <code>bakgrund2.png</code>. Den första bilden sätts till en höjd av 200px, medan den andra sätts till att ha en bredd på 400px. Därefter sätter vi så att den första bilden inte repeteras alls, medan den andra repeteras åt alla håll.

PGJ: /* Kombination */

2019-04-12T11:11:32Z

Kombination

← Äldre version		Versionen från 12 april 2019 kl. 11.11
Rad 191:		Rad 191:
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	body {		body {
	background-position: ~~center 1em~~ top;		background-position: left 2em top;
	}		}
	</syntaxhighlight>		</syntaxhighlight>
Rad 197:		Rad 197:
	<codepen pen="EJXRdR" tab="css,result" height="250">		<codepen pen="EJXRdR" tab="css,result" height="250">
	</codepen>		</codepen>
	Ovanstående kommer att positionera ~~bilen~~ i toppen ~~och~~ <code>~~1em~~</code> ifrån ~~mitten~~.		Ovanstående kommer att positionera bilden i toppen, <code>2em</code> ifrån vänstra kanten.

	== Kombinera bild och färg ==		== Kombinera bild och färg ==

PGJ: /* Kombination */

2019-04-12T11:09:38Z

Kombination

← Äldre version		Versionen från 12 april 2019 kl. 11.09
Rad 195:		Rad 195:
	</syntaxhighlight>		</syntaxhighlight>

	<codepen pen="~~pqqgyw~~" tab="css,result" height="250">		<codepen pen="EJXRdR" tab="css,result" height="250">
	</codepen>		</codepen>
	Ovanstående kommer att positionera bilen i toppen och <code>1em</code> ifrån mitten.		Ovanstående kommer att positionera bilen i toppen och <code>1em</code> ifrån mitten.

PGJ: /* Kombination */

2019-04-12T10:10:24Z

Kombination

← Äldre version		Versionen från 12 april 2019 kl. 10.10
Rad 194:		Rad 194:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

			<codepen pen="pqqgyw" tab="css,result" height="250">
			</codepen>
	Ovanstående kommer att positionera bilen i toppen och <code>1em</code> ifrån mitten.		Ovanstående kommer att positionera bilen i toppen och <code>1em</code> ifrån mitten.

PGJ: /* repeat-x */

2019-04-12T07:16:49Z

repeat-x

← Äldre version		Versionen från 12 april 2019 kl. 07.16
Rad 90:		Rad 90:
	==== <code>repeat-x</code> ====		==== <code>repeat-x</code> ====
	Bilden upprepas enbart i x-led.		Bilden upprepas enbart i x-led.
	<codepen pen="zvxbZM" tab="css,result" height="~~200~~">		<codepen pen="zvxbZM" tab="css,result" height="400">
	</codepen>		</codepen>

PGJ: /* Att styra bildupprepning */

2019-04-12T07:16:24Z

Att styra bildupprepning

← Äldre version		Versionen från 12 april 2019 kl. 07.16
Rad 82:		Rad 82:

	=== Att styra bildupprepning ===		=== Att styra bildupprepning ===
	När en bakgrundsbild är mindre än webbfönstret, så är defaultbeteendet att bilden upprepas flera gånger bredvid varandra så att hela den tillgängliga ytan täcks. Om vi vill ändra detta beteende använder vi oss av <code>[[background-repeat]]</code>-egenskapen. De vanligaste värdena för denna egenskap är:		När en bakgrundsbild är mindre än webbfönstret, så är defaultbeteendet att bilden upprepas flera gånger bredvid varandra så att hela den tillgängliga ytan täcks. Om vi vill ändra på detta beteende använder vi oss av <code>[[background-repeat]]</code>-egenskapen. De vanligaste värdena för denna egenskap är:
	==== <code>repeat</code> ====		==== <code>repeat</code> ====
	Defaultvärdet, bilden upprepas i bägge ledder om så behövs.		Defaultvärdet, bilden upprepas i bägge ledder om så behövs.

PGJ: /* Att styra bildupprepning */

2019-04-12T07:16:10Z

Att styra bildupprepning

← Äldre version		Versionen från 12 april 2019 kl. 07.16
Rad 82:		Rad 82:

	=== Att styra bildupprepning ===		=== Att styra bildupprepning ===
	När en bakgrundsbild är mindre än webbfönstret, så är defaultbeteendet att bilden ~~kommer att~~ upprepas flera gånger bredvid varandra så att hela den tillgängliga ytan täcks. Om vi vill ändra detta beteende använder vi oss av <code>[[background-repeat]]</code>-egenskapen. De vanligaste värdena för denna egenskap är:		När en bakgrundsbild är mindre än webbfönstret, så är defaultbeteendet att bilden upprepas flera gånger bredvid varandra så att hela den tillgängliga ytan täcks. Om vi vill ändra detta beteende använder vi oss av <code>[[background-repeat]]</code>-egenskapen. De vanligaste värdena för denna egenskap är:
	==== <code>repeat</code> ====		==== <code>repeat</code> ====
	Defaultvärdet, bilden upprepas i bägge ledder om så behövs.		Defaultvärdet, bilden upprepas i bägge ledder om så behövs.

PGJ: /* Att sätta en bakgrundsbild */

2019-04-12T07:15:36Z

Att sätta en bakgrundsbild

← Äldre version		Versionen från 12 april 2019 kl. 07.15
Rad 79:		Rad 79:
	</codepen>		</codepen>

	Eftersom det var en rätt liten bild, så kommer bilden att upprepas ett antal gånger såväl horisontellt som vertikalt. Det finns ~~lite~~ olika sätt vi kan styra om vi vill ha detta beteende eller ej.		Eftersom det var en rätt liten bild, så kommer bilden att upprepas ett antal gånger såväl horisontellt som vertikalt. Det finns olika sätt vi kan styra om vi vill ha detta beteende eller ej.

	=== Att styra bildupprepning ===		=== Att styra bildupprepning ===

PGJ: /* Att sätta en bakgrundsbild */

2019-04-12T07:14:53Z

Att sätta en bakgrundsbild

← Äldre version		Versionen från 12 april 2019 kl. 07.14
Rad 50:		Rad 50:
	Vill du göra din sida lite roligare, kan det vara trevligt att ange en bild som bakgrund. Kom dock ihåg att bilder lätt kan göra sidans innehåll mer svårläst. Se därför till att använda bilder som har bra kontrast gentemot resten av innehållet!		Vill du göra din sida lite roligare, kan det vara trevligt att ange en bild som bakgrund. Kom dock ihåg att bilder lätt kan göra sidans innehåll mer svårläst. Se därför till att använda bilder som har bra kontrast gentemot resten av innehållet!

	För att kunna sätta en bakgrundsbild måste du veta URL~~:en~~ som leder till bilden. Låt oss säga att det i vårt fall är det en fil som heter <code>bakgrund.jpg</code> som vi vill visa. Låt oss även säga att bilden ligger i samma katalog som det HTML-dokument som vi jobbar med. För att ange bakgrundsbilden skulle vi då kunna skriva så här:		För att kunna sätta en bakgrundsbild måste du veta vilken [[URL]] som leder till bilden. Låt oss säga att det i vårt fall är det en fil som heter <code>bakgrund.jpg</code> som vi vill visa. Låt oss även säga att bilden ligger i samma katalog som det HTML-dokument som vi jobbar med. För att ange bakgrundsbilden skulle vi då kunna skriva så här:
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">

PGJ: /* repeat-x */

2019-02-13T12:53:44Z

repeat-x

← Äldre version		Versionen från 13 februari 2019 kl. 12.53
Rad 90:		Rad 90:
	==== <code>repeat-x</code> ====		==== <code>repeat-x</code> ====
	Bilden upprepas enbart i x-led.		Bilden upprepas enbart i x-led.
	<codepen pen="zvxbZM" tab="css,result" height="~~100%~~">		<codepen pen="zvxbZM" tab="css,result" height="200">
	</codepen>		</codepen>