Gå til innhold

Skalering på bakgrunnsbilde


Anbefalte innlegg

Skrevet

Hei!

 

Et spørsmål ang bakgrunn.

Er det mulig å få bakgrunn til å fylle nettleservinduet 100% hele tiden?

 

post-104985-1154686570_thumb.jpg

 

La oss si at en vil at dette bilde skal ligg helt ut i alle hjørner, uavhengig av størrelse på vinduet. Hvordan kan en få det til? Det betyr ingenting om forholdet mellom høyde og bredde i bildet blir feil i forhol til orginal.

Videoannonse
Annonse
Skrevet

Det er ikke mulig å skalere bakgrunnsbilder med CSS (eller HTML for den saks skyld) per dags dato. Men hvis du har et mønster som kan repeteres, er det ikke noe problem, da gjøres dette automatisk med mindre noe annet er spesifisert.

Skrevet
Det er ikke mulig å skalere bakgrunnsbilder med CSS (eller HTML for den saks skyld) per dags dato. Men hvis du har et mønster som kan repeteres, er det ikke noe problem, da gjøres dette automatisk med mindre noe annet er spesifisert.

6612489[/snapback]

 

 

Hmmm. Vrient (ihvertfall tidkrevende) å repetere et møster som det over. Men dersom du trykker på bildet over, så vil du se at bildet endrer størrelse når du endrer size på leservinduet. Hvordan er det gjort? Ligger riktignok ikke helt ut i alle hjørner, men endrer størrelse proporsjonalt.

Skrevet
Det bildet skalerer jo bare fordi det er for stort for nettleservinduet, og nettleseren skalerer det ned.

 

Jeg ser forresten ikke noe bilde i første post.

6612767[/snapback]

 

Ok, men det er kanskje det jeg er på jakt etter.... Hva må jeg gjøre for å få nettleseren til å skalere ned et bakgrunnsbilde?

Ser du ikke noe bilde? Jeg gjør. Har jeg gjort noe feil når jeg lastet det opp kanskje?

Skrevet

Nettleseren gjør dette automatisk for vanlige bilder, men så fort du setter bildet som bakgrunn funker ikke dette lenger. Du må gjerne sette deg ned og skrive noe som gjør dette i JavaScript, men ikke regn med noe hjelp fra min side, jeg kan ikke JavaScript.

Skrevet (endret)

Det er mulig å finne ut oppløsningen til brukerene og derreter sette bakrundsbilde ;)

 

 

EDIT: Blir ikke så bra om vinduet ikke er samme størrelse som oppløsninga da..

Endret av goggen90
Skrevet

Vel, etter mye styr, flere serier med ord en ikke finner i ordboken - og mange forsøk - fikk jeg nå til det jeg var på jakt etter.

 

CSS

 

body { text-align: center; width: 100%; height: 100%; margin: 0; padding: 0; }

#wrap { text-align: left; }

#bakgrunn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0 auto; }

* html #bakgrunn { position: relative; z-index: 1; }

#tekstboks { text-align: center; vertical-align: middle; width: 100%; height: 100%; }

.tekst { color: white; text-align: left; position: absolute; top: 25%; left: 25%; width: 45%; height: auto; z-index: 2; padding: 2%; }

 

 

html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

 

<title>Test 100%</title>

<link href="basic.css" rel="stylesheet" type="text/css" media="all" />

</head>

 

<body>

<div id="wrap">

<div id="bakgrunn">

<img src="kryss.gif" height="100%" width="100%"/></div>

 

<div id="tekstboks">

 

<div class="tekst">

<h1>Sidetekst</h1>

<p>sdfsdfsdfsdf

sdfsdfsdfs gdfdsf fwerjqweruoewqnfnwe wef joiajf ai dfjs fj asf øo jfj sadfojsaodjfsf

df jaosjfd øoasj foa fd øsaojfd øoaj fd sadf

dfjs dfsa fa jfoiweuof hsdfhølsjdfiwoeur erfj

sf asdjf jsodjf øsajdf jweiuf odfk jf wjf øsj dfjsaid jfsifdlkndsf

slk fdnls ndfsadf s f sdf jsd fjsjd flkjsa lfd

dsa æfaskjdf jdf lkdsjfiouewj fsd jfsad fæsajdfæ sdj

dsaf jsajfd ajfd sad</p>

 

 

</div>

</div>

 

 

 

</div>

</body>

</html>

 

bildet

 

post-104985-1154702785_thumb.jpg

 

 

 

Sikkert endel unødig kode, men orket ikke renske mer opp. Og javaScipt har jeg absolutt ingen peiling på!

Skrevet
Du kunne vell lagt til bildet i #bakrunn?

 

background-image: url('bilde.jpg');

6614131[/snapback]

 

Nope! Da hadde det ikke fulgt nettleservinduet.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...