Webb­utveckling

Bilder och CSS

När vi jobbar med bilder på våra sidor så finns det ett par saker som kan vara bra att styra upp med CSS-kod.

1. Storlek
2. Placering
3. Bakgrundsbilder

Storlek

Det är god standard att försöka ha bildernas originalstorlekar att matcha med storleken man vill använda på sin webbplats. Detta av två anledningar:

1. Är bilden större så tar den onödigt mycket plats på servern och sidan tar längre tid att ladda.
2. Är bilden mindre så blir den suddig på sidan.

Men nu är inte verkligheten så att man alltid har en bild i rätt storlek. Då har vi än så länge kollat på hur vi ändrar bildstorleken med HTML, men det är oftast bättre att ändra på storleken med CSS.

img{
	width: 250px;
	height: 250px;
	border: solid 1px;
}

Att säga att alla bilder ska ha exakt samma storlek är däremot lite knasigt. Ofta vill man ha flera olika standard-storlekar. Det löser man smidigast genom att skapa en klass för varje bildstorlek:

.small{
	width: 100px;
	height: 100px;
	border: solid 1px;
}
.medium{
	width: 250px;
	height:250px;
	border: solid 1px;
}	
.large{
	width: 500px;
	height: 500px;
	border: solid 1px;
}

<img class="large" src="https://lund-imagevault.lund.se/publishedmedia/ce8indatpb90hg6hkzkc/Lunds_kommun_logo_vertikal-F-RG.png" alt="Lunds logga stor">
<img class="medium" src="https://lund-imagevault.lund.se/publishedmedia/ce8indatpb90hg6hkzkc/Lunds_kommun_logo_vertikal-F-RG.png" alt="Lunds logga mellan">
<img class="small" src="https://lund-imagevault.lund.se/publishedmedia/ce8indatpb90hg6hkzkc/Lunds_kommun_logo_vertikal-F-RG.png" alt="Lunds logga liten">	

Som vi kan se i exemplena med Lunds kommuns logga så ser den konstig ut eftersom vi inte har bibehålligt proporionerna i bilden. Om man vill att bilden ska behålla sina proprtioner så anger man antingen ett värde till width eller ett värde till height.

img{
	width: 100%;
}

Placering

Om man vill justera sin bild och låta text flöda runt den kan det vara en idé att floata den. Och om man har en sida med mycket text där bilder ska förhöja upplevelsen kan det vara en god idé att skapa en CSS-klass för att aligna den:

.align-left{
	float: left;
	margin-right: 5px; /* Tillagt för att ge lite luft. Det ser snyggare ut */
}
.align-right{
	float: right;
	margin-left: 5px; /* Tillagt för att ge lite luft. Det ser snyggare ut */
}

<p>
	<img class="align-left medium" src="..." alt="Lunds logga — floatad till vänster" />
	Här kommer text...
</p>

<p>
	<img class="align-right medium" src="..." alt="Lunds logga — floatad till höger" />
	Här kommer text...
</p>

Det kan vara värt att notera att jag ger bilderna två klasser och seperarar dem med ett enkelt mellanslag.

Nu har vi Lunds logga floatad till vänster här, och här till höger kan vi se Lunds logga igen. Även den floatad så att texten flödar kring de båda bilderna. För att exemplet ska bli givande så behöver jag här nu fylla på med mer text så att vi tydligt kan se vad som händer, även med en stor skärm. För med en liten skärm så blir det mycket tydligare eftersom det är färre pixlar att röra sig på.

Nu har jag lagt bilderna i var sitt textstycke för att visa på effekten. Som vi kan se så går det övre stycket ut över kommunloggan () och om jag fortsätter att skriva på det här stycket så fortsätter det ner under den vänstra loggan. Det kan hända att du måste minska på skärmstorleken, antingen genom att zooma in på sidan eller genom att ändra storleken på fönstret för att se hur texten rör sig runt biderna. Zoomar man för mycket så kan det dock hända att det ser förjdävligt ut på grund av att orden blir för långa och inte får plats i det utrymme som de har fått. Jag borde kanske tagit någon färdig facktext till det här. För helt ärligt börjar det bli svårt att fylla ut med fler "betydelsefulla" kommentarer. Jag får väl helt enkelt lita på att det här är lagom med text.

Det var inte tillräckligt med text. Så här kommer lite mer text som bara ska fylla ut med mer text när man har zoomat ut till 100%. Men helt ärligt, jag har inte tid med det här just nu, så nu får det vara. Men jag behöver typ en eller två rader till för att det ska bli rätt. Så nu får det fanimig räcka. Men tro fan att jag behövde en rad till här, nu börjar lektionen om typ fem minuter. Nu har det blivit bättre.

Centrera

Det finns två sätt att centrera en bild med CSS. Men det generalla knepet är att man ändrar på det till ett block-element.

.align-center1{
	display: block;
	margin: auto;
}
.align-center2{
	display: block;
	text-align: center;
}

I det övre exemplet så har vi satt marginalerna över och under bilden till 0px och att marginalerna till vänster och till höger om bilden ska lösas automatiskt. För att det här ska fungera så behöver man också ange en bredd på bilden, så att det finns en marginal att jobba med.

I det nedre exemplet så har vi sagt att den ska justeras mot mitten.

Visst blev det stylish? Här har jag använt den övre klassen.

Bakgrundsbild

body{
	background-image: url(plats);
}
					

Som vi kan se så måste vi inte lägga bakgrundsbilden till hela dokumentet. Utan genom att använda klasser och id så kan vi få bilden att bara vara bakom vissa element.

När vi väljer en bakgrundsbild behöver vi också tänka på att den inte ska störa det andra innehållet. Som i det här fallet när det svarta i bilden gör mörk text svårläst och det vita i bilden gör ljus text svårläst.

#bakgrund2{
	background-image: url(https://yourbasic.org/algorithms/tree.png);
	background-repeat: repeat-x;
}

#bakgrund2 p{
	/* Den här koden påverkar alla p element som ligger i blocket med id=bakgrund2 */
	background-color: rgba(255,255,255, 0.75);
}

background-attachment

Det finns också ett CSS-kommando som heter "background-attachment" som styr hur bakgrundsbilden ska bete sig.

body{
	background-image: url(bilden);
	background-attachment: fixed;
}
body{
	background-image: url(bilden);
	background-attachment: scroll;
}

Man kan också styra bakgrundsbildens position med kommandot background-position.

body{
	background-image: url(bilden);
	background-position: left top;
}

Där kan man ange hur den ska ligga i x-led och hur den ska ligga i y-led. Man kan också ange positionen i px eller %.

#bakgrund4{
	background-image: linear-gradient(to bottom, gold, silver);
}

#bakgrund5{
	background-image: linear-gradient(to bottom right, red, orange, yellow, lightgreen, lightblue, blue, purple);
}