CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede naquer Nybegynder
21. august 2012 - 00:19 Der er 5 kommentarer og
1 løsning

Billede der fylder hele skærmen

Hej,

Kan i fortælle mig hvordan det er muligt at lave et billede som fylder hele skærmen lige meget hvilken opsætning brugeren kører med. Et eksempel på dette er forsidebilledet på https://www.airbnb.com/
Avatar billede olebole Juniormester
21. august 2012 - 00:32 #1
<ole>

<style type="text/css">
#pic {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: black;
}
#pic img {
    position: absolute;
    left: 50%;
    margin-left: -800px;
}
</style>

<div id="pic">
    <img src="https://a3.muscache.com/airbnb/static/landing_pages/home_v2/hero/356602-453e2c215edbd7746aa59cd1daeec0ee.jpg" alt="">
</div>

/mvh
</bole>
Avatar billede olebole Juniormester
21. august 2012 - 00:32 #2
<style type="text/css">
#pic {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: black;
}
#pic img {
    position: absolute;
    left: 50%;
    margin-left: -800px;
}
</style>

<div id="pic">
    <img src="https://a3.muscache.com/airbnb/static/landing_pages/home_v2/hero/356602-453e2c215edbd7746aa59cd1daeec0ee.jpg" alt="">
</div>
Avatar billede naquer Nybegynder
21. august 2012 - 17:40 #3
Fantastisk! Lige hvad jeg havde brug for.

Du smider bare et svar :)
Avatar billede olebole Juniormester
21. august 2012 - 17:50 #4
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)
Avatar billede olebole Juniormester
21. august 2012 - 17:56 #5
PS: 'Fidusen' er at positionere billedet absolut og sætte left til 50%. Nu ville billedet så begynde halvt inde på siden - hvorfor vi sætter dets left-margin til minus halvdelen af billedets bredde (-800px).

Et absolute positioneret element vilplacere sig i forhold til det første, omkransende element, som er positioneret. Derfor positionerer vi DIV'et relative - som er helt 'neutral' i forhold til sidens flow.

DIV'et vil lægge sig som forventet (blive 'presset' på plads af sidens andre elementer). Billedet vil 'flyde' rundt inde i DIV'et - bestemt af left, top, right, bottom og margins.

Håber, det hjalp lidt på forståelsen af koden  =)
Avatar billede naquer Nybegynder
21. august 2012 - 18:04 #6
Godt svar - det giver god mening. Studsede lidt over de -800 tidligere :)

Tak!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 3 29/09/202410:58 20/03/202513:38
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
02/0719:07 Mellem tidspunkter Af nyhavn18 i Excel
02/0710:02 Oversigt over antal feriedage Af AnjaJesse i Excel
02/0706:56 manglende filter Af skaanning i E-mail programmer
30/0616:17 Brugere må gerne redigere, men ikke overskrive default sortering eller filtrering Af mj72 i Excel
30/0613:37 Google Drev til PC vil ikke logge på Af k_lindholm i Backup- & Antivirus
White papers
Flere white papers »


Premium
Teaser billede
Brobizz udnyttes i stor phishing-kampagne netop nu - det skal du passe på
Læs mere »
Disse syv it-projekter sluger otte milliarder kroner af statens budget: Skatteministeriet dominerer listen over statslige it-fiaskoer
Paradoksalt at staten binder sig til Microsoft med ny mangeårig aftale: ”Lad os håbe, at det er slut, når den her kontrakt udløber," siger toprådgiver
Milliard-virksomheden Crayon står til at forsvinde: Opsluges helt af SoftwareOne efter opkøb
Se alle »
Computerworld
Teaser billede
Danmarks største fiberselskab skifter navn: Norlys skal ikke længere hedde Norlys
Læs mere »
Hundredevis af printer-modeller ramt af sårbarheder
Glemte at fjerne adgang for suspenderet it-medarbejder: Næste dag var kunder i Tyskland og Bahrain låst ude
Amerikansk koncern med 700 ansatte i Danmark: Sender besked til kunder 21 måneder efter storstilet angreb
Se alle »
CIO
Teaser billede
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Læs mere »
Hackerne slog til under stor SAP-migrering: Tvang Bauhaus til at vælge én af disse tre løsninger for it-infrastrukturen
Her står medarbejderne for at ansætte og fyre - og det har gjort rekruttering af it-professionelle langt lettere
Rigspolitiet gør klar til stort opgør med it-evighedskontrakter: Søger hjælp fra leverandørerne
Se alle »
Job & Karriere
Teaser billede
Fungerede ikke: Dropper AI som erstatning for kundeservice-medarbejdere - har nu brug for nye folk
Læs mere »
NNIT har fyret 100 medarbejdere - nedjusterer markant
It-chef og halv it-afdeling fyret i forsikringsselskab på grund af kommentar om potteplante
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Se alle »
White paper
Teaser billede
NIS2: Sådan styrker du både cybersikkerhed og compliance
Læs mere »
AI og kunderejsen: Sådan vinder du fremtidens forbrugere
Sådan samler du virtualisering og containerdrift i én løsning
Sikkerhed gjort enkelt: Beskyt din virksomhed direkte i browseren
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »