Hur sträcker jag ut bilden på background i en div

mats47Medlem sedan mars 2009185 inlägg

Frågan11 jan. 2010 11:58#1

Jag har en logotyp där jag vill ha text på.

    <div id="logo" style="background:url(%=RSEVENTS("loggo")%>.jpg);"width: 600px">
    <h1><%=RSEVENTS("foretagsnamn")%></h1>
    </div>

width på bilden ska va 600px, men om bilden är mindre tex 400px
så visar den 400pc och dom övriga 200px börjar den från början igen.

Hur sträcker jag ut bilden på background i en div?

Danne VMedlem sedan aug. 20068 090 inlägg

11 jan. 2010 12:31#2

Såvitt jag känner till kan du inte sträcka den alls, i vart fall inte med css. Kanske det finns nåt fiffigt javascript som klarar det. Det enda du har att göra är ju att se till att bilden verkligen är 600px.

Däremot kan du ju se till att den inte repeterar, och att den hamnar i mitten (om du vill ha den där alltså):

(Dessutom har du ett citationstecken för mycket i koden. Det som sitter före "width" ska bort)

 <div id="logo" style="background:url(%=RSEVENTS("loggo")%>.jpg)no-repeat center; width: 600px">
    <h1><%=RSEVENTS("foretagsnamn")%></h1>
    </div>

jarvkloMedlem sedan juli 20013 378 inlägg

11 jan. 2010 18:27#3

mats47 skrev:

Hur sträcker jag ut bilden på background i en div?

Hmm..

När du sträcker en bild i bägge dimensionerna, ser det konstigt ut, så jag utgår från att du menar "breddar" (dvs vill sträcka ut den horisontellt) ...

Som Danne V säger, finns det inget i "ren" CSS för detta för närvarande - men du *behöver* inte ta tilll Javascript (även om det skulle vara ett alternativ att göra det också) förutsatt att du kan tänka dig att lägga till ett <img>-element i din kod för bilden. Att skala om en bild i en <img> gör man kanske lämpligast genom att bara ange bredd (och inte höjd) för bilden - för då bibehålls bildens proportioner.

Men sedan behövs lite till för att göra bilden till en bakgrundsbild också - Och det är kanske inte det första man provar, men man kan trixa lite med positionering och z-index om man klurar lite.

"position: absolute" lyfter ju "upp" bilden ur sidan, och normalt skulle den lägga sig ovanpå allt, men om man tar ett steg till, och samtidigt sätter position:relative på innehållet (som ju "lyfter upp innehållet men lämnar en lucka under så att säga), så kan man manipulera "z-index" så att bilden hamnar underst istället om man gör t.ex. såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Stretching a background image - Public domain sample by Jarvklo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">

	#logo     {position: relative; overflow: hidden}
	#logo img {width: 100%; position: absolute;  z-index: 0;}
	#logo h1  {position: relative; text-align: center; z-index: 1;}

	</style>
</head>
<body>

    <div id="logo">
	<img src="bild.png"/>
	<h1>Lorem Ipsum and et frigging cetera ...</h1>
    </div>

</body>
</html>

Av någon anledning funkar detta inte om man inte är beredd att "kapa" bilden i underkant om den blir högre än innehållet (därav overflow: hidden) - men du vill kanske ändå inte riskera att bilden "flyter ut" under resten av sidan, så det kanske inte är ett problem?

Lycka till :bire