Visa källa för Att ändra bakgrund

Vi ska ta och prova på hur man kan använda sig av [[CSS]] för att ange lite intressantare bakgrunder på saker. Dessa egenskaper går att sätta på alla typer av element. I alla exempel på sidan kommer vi att jobba med att sätta olika bakgrundsegenskaper för <code>body</code>-elementet, men de fungerar lika bra i andra element.

== Ändra bakgrundsfärg ==
För att ändra bakgrundsfärg använder man sig av egenskapen <code>[[background-color]]</code>. Som värde till egenskapen anger man färg på något av de sätt som vi redovisade i [[färg]]-aktiviteten.

Om vi vill sätta blå bakgrund på hela sidan skulle vi kunna göra så här:
<codepen pen="BoybKL" tab="css,result" height="200">
<syntaxhighlight lang="css">
body {
  background-color: blue;
}
</syntaxhighlight>
</codepen>
Skulle vi vilja ha en mörkare blå, kanske med blått satt till 50 % kunde vi göra så här istället.
<codepen pen="MaYxyQ" tab="css,result" height="200">
<syntaxhighlight lang="css">
body {
  background-color: #000080;
}
</syntaxhighlight>
</codepen>

== Ändra text-/förgrundsfärg ==
Kanske du tycker att det blev lite svårläst med svart text på mörkblå bakgrund? I så fall måste du även ändra textfärgen. Det gör man med egenskapen <code>[[color]]</code>. Självklart godtar även denna egenskap alla de varianter som finns för att ange [[färg|färger]].

Låt oss säga att du vill ha gul färg, då kunde du göra så här:
<codepen pen="LpEaNv" tab="css,result" height="200">
<syntaxhighlight lang="css">
body {
  color: yellow;
}
</syntaxhighlight>
</codepen>
Man kan förstås sätt flera egenskaper samtidigt i varje CSS-regel. Så om vi både vill sätta bakgrundsfärg och textfärg, skull det kunna bli så här:
<codepen pen="vNEPKY" tab="css,result" height="200">
<syntaxhighlight lang="css">
body {
  background-color: #000080;
  color:  yellow;
}
</syntaxhighlight>
</codepen>


<div class="well well-meadow">
Det spelar ingen roll i vilken ordning du sätter egenskaperna, så länge det inte är någon egenskap som skriver över en annan. Detta kan inträffa med så kallade samlingsegenskaper, eller kortegenskaper, som sätter flera egenskaper med ett enda egenskaps-kommando. Kortkommandot <code>[[background]]</code> som gör att man kan sätta alla följande egenskaper samtidigt i en enda egenskapstilldelning; <code>[[background-color]]</code>, <code>[[background-image]]</code>, <code>[[background-repeat]]</code>, <code>[[background-attachment]]</code> och <code>[[background-position]]</code>. Om man redan satt <code>[[background-color]]</code> och sedan använder <code>[[background]]</code>, kommer den senare att skriva över det värde som sattes i den första.
</div>

== Att sätta en bakgrundsbild ==
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 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:
<syntaxhighlight lang="css">
body {
  background-image: url("bakgrund.png");
}
</syntaxhighlight>

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">
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bakgrundsdemo 1</title>
    <style>
      body {
        background-image: url("bakgrund.png");
      }
    </style>
  </head>
  <body>
    <h1>En bakgrundsdemo</h1>
  </body>
</html>
</syntaxhighlight>
</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 olika sätt vi kan styra om vi vill ha detta beteende eller ej.

=== 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 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> ====
Defaultvärdet, bilden upprepas i bägge ledder om så behövs.
<codepen pen="Qjwopq" tab="css,result" height="300">
</codepen>

==== <code>repeat-x</code> ====
Bilden upprepas enbart i x-led.
<codepen pen="zvxbZM" tab="css,result" height="400">
</codepen>

==== <code>repeat-y</code> ====
Bilden upprepas enbart i y-led.
<codepen pen="EVaMWG" tab="css,result" height="400">
</codepen>

==== <code>no-repeat</code> ====
Bilden upprepas inte, utan visas enbart en gång.
<codepen pen="avzMJX" tab="css,result" height="350">
</codepen>

=== Sätta storlek på en bakgrundsbild ===
Om man vill, kan man även ändra storlek på bakgrundsbilden. För att göra detta använder man egenskapen <code>[[background-size]]</code>. Denna kan ta flera olika parametrar. Vi tar och går igenom dem...
==== Måttenhet ====
Man kan använda alla  [[Måttenheter_i_CSS|CSS-måttenheter]] tillsammans med <code>[[background-size]]</code>. Bilden kommer då att sättas till den storlek som man anger. Om den angivna storleken skiljer sig ifrån bildens verkliga storlek, så kommer webbläsaren att skala om bilden till den angivna storleken.

Man kan ange flera, samtidiga värden till denna egenskap. Vi går igenom vad som händer med olika kombinationer av värden.

===== Ett värde =====
Om vi enbart anger en storlek, t.ex.:
<codepen pen="jrJwNO" tab="css,result" height="300">
<syntaxhighlight lang="css">
body {
  background-image: url("bakgrund.png");
  background-size: 400px;
}
</syntaxhighlight>
</codepen>

Jämför [http://exempel.webbling.se/bakgrund1.html exempel1] med [http://exempel.webbling.se/bakgrund2.html exempel2]. I det första fallet har vi en oskalad bild, medan vi i det andra fallet har en bild som skalats om så att bredden är <code>400px</code>. Då vi enbart anger ett värde är det alltid bredden som anges och bildens höjd skalas om i proportion till den angivna bredden (vilket är det samma som om höjden skulle angetts som <code>auto</code>). Detta gör att bilden inte kommer att bli uttänjd och se konstig ut. Det är sällan man vill skala om bilder så de inte har samma, proportionella skalfaktor i både x- och y-ledd.

===== Två värden =====
Om vi anger två storleksvärden, t.ex.:
<codepen pen="WQbmOE" tab="css,result" height="350">
<syntaxhighlight lang="css">
body {
  background-image: url("bakgrund.png");
  background-size: 400px 200px;
}
</syntaxhighlight>
</codepen>
Jämför [http://exempel.webbling.se/bakgrund2.html exempel2] med [http://exempel.webbling.se/bakgrund3.html exempel3]. I detta fall anger vi såväl bredd som höjd. För att demonstrera detta har vi satt "konstiga" proportioner på bilden, vilket gör att den tänjts ut.

===== <code>Auto</code> =====
Som specialfall kan man sätta nyckelordet <code>auto</code> istället för en av storlekarna. Då anger man att bilden ska skalas i proportion till den andra angivelsen. Om vi t.ex. vill sätta en bilds höjd och hålla dess proportioner i bredd, kan vi ange:
<codepen pen="ZbYPyj" tab="css,result" height="300">
<syntaxhighlight lang="css">
body {
  background-image: url("bakgrund.png");
  background-size: auto 200px;
}
</syntaxhighlight>
</codepen>
Att sätta den andra parametern, dvs höjden, till <code>auto</code>, är det samma som att enbart ange ett värde.

==== <code>contain</code> ====
Detta kodord anger att bilden ska skalas om till den största möjliga storlek där bilden är fullt synlig i elementet, såväl i bredd som i höjd. Detta kan alltså göra att bilden inte täcker hela skärmytan om dess proportioner inte är de samma som skärmens proportioner. Om bilden är mindre än elementet, kommer den att repeteras beroende på hur repetitionsegenskapen är satt.
<codepen pen="EVaMXr" tab="css,result" height="300">
</codepen>

==== <code>cover</code> ====
Detta värde anger att bilden ska skalas upp så att den täcker hela skärmyta, såväl i bredd som i höjd. Bilden skalas så den bibehåller sina proportioner. Detta kan göra att delar av bilden hamnar utanför den synliga ytan.
<codepen pen="ojgVev" tab="css,result" height="300">
</codepen>

== Att ange position ==
Med hjälp av <code>[[background-position]]</code> kan man ange var på sidan en bild ska placeras. Man anger oftast två värden, det första är x-positionen och det andra y-positionen. Man kan ange en position med någon av de vanliga måttenheterna, t.ex. <code>px</code> eller <code>%</code>. Men det finns även en del speciella värden som kan anges.

=== <code>center</code> ===
Kan sättas såväl för x- som y-position. Bilden placeras i mitten av föräldraelementet, antingen i x- eller y-ledd. Observera att föräldraelementet måste ha höjd eller bredd för det ska funka som man tänkt sig.

Defaultvärdet, om man inte sätter något, är <code>center center</code>.
<codepen pen="ZVVbgJ" tab="css,result" height="250">
</codepen>

=== <code>left</code> ===
Bilden sätts så långt åt vänster som möjligt. Lägg märke till att om vi inte anger någon positionering för Y-ledden, så är defaultvärdet <code>center</code>.
<codepen pen="rooxVp" tab="css,result" height="250">
</codepen>

=== <code>right</code> ===
Bilden sätts så långt åt höger som möjligt.
<codepen pen="NeexGr" tab="css,result" height="250">
</codepen>

=== <code>top</code> ===
Bilden sätts så långt upp som möjligt. Lägg märke till att om man inte sätter något värde för X-ledden, så är defaultvärdet <code>center</code>
<codepen pen="Bvvjjj" tab="css,result" height="250">
</codepen>

=== <code>bottom</code> ===
Bilden sätts så långt ner som möjligt.
<codepen pen="pqqgyw" tab="css,result" height="250">
</codepen>

=== Kombination ===
Man kan kombinera ett av positioneringsorden med en måttangivelse. Då kommer måttangivelsen att vara en offset ifrån angiven position. Ett exempel på detta:
<syntaxhighlight lang="css">
body {
  background-position: left 2em top;
}
</syntaxhighlight>

<codepen pen="EJXRdR" tab="css,result" height="250">
</codepen>
Ovanstående kommer att positionera bilden i toppen, <code>2em</code> ifrån vänstra kanten.

== Kombinera bild och färg ==
Självklart kan man både ange bakgrundsfärg och bild samtidigt. Då kommer bakgrundsfärgen att visas överallt där bilden inte täcker bakgrunden, t.ex. om vi satt en bild som inte täcker hela skärmytan eller om vår bild har genomskinliga regioner.
<codepen pen="wKBOog" tab="css,result" height="300">
</codepen>

== Flera bakgrundsbilder ==
Om man så vill, kan man ange flera bakgrundsbilder samtidigt. Det gör man genom att ange flera bilder till samma <code>[[bakground-image]]</code>-egenskap. Varje bild åtskiljs av ett ","-tecken. Likaså kan man ange flera parametrar till alla bakgrundsegenskaper. Även där åtskiljs varje parameter med ett kommatecken. Varje parameter tillhör motsvarande bild i den sekvens av bilder man angett. Så om vi t.ex. har tre bakgrundsbilder och sätter tre värden till <code>[[background-size]]</code>, så motsvarar första parametern den första bilden storlek, den andra parametern motsvarar bild tvås storlek, osv...

Ett exempel:

<syntaxhighlight lang="css">
body {
  color: yellow;
  background-color: blue;
  background-image: url("bakgrund.png"), url("bakgrund2.png");
  background-size: auto 200px, 400px;
  background-repeat: no-repeat, repeat;
}
</syntaxhighlight>

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.

Här kan du se hur exemplet ser ut i verkligheten:
<codepen pen="XooXVP" tab="css,result" height="350">
</codepen>
== Bakgrund på andra saker ==
Man kan inte bara sätta bakgrundsfärg och bakgrundsbilder på hela webbsidan, utan man kan även göra det på olika regioner på skärmen. Men för att kunna åstadkomma det, måste vi titta lite på hur man skapar layout på webbsidor...

== Nästa aktivitet ==
[[Boxmodellen]]

[[Category:Webbutveckling]]