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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
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
I dag 16:38 Styr dit hjemmeinternet via app på smartphone? Af Steenberg i Andet software
I dag 14:59 Jeg skal bruge en WDTV box Af bjarnebif i Fri debat
I dag 09:32 Ipad version 18.1.1 Af nu_igen i Apps til iOS
I går 15:32 Søgeknap Af erlandsen i Access
I går 14:31 Makro - Søg efter værdi på tværs af flere ark Af Chjes94 i Excel
White papers
Flere white papers »


Premium
Teaser billede
Microsoft ramt af massesøgsmål om unfair cloud-licenser: Kan koste selskabet milliarder
Læs mere »
AI-pc’er gør brugerne langsommere, og kun få benytter dem: Derfor går det galt
Microsoft gør klar til stor opgradering af Windows’ sikkerhed i 2025
Bjarne Søballe har banket nogle af landets største Microsofthuse op fra bunden - nu skal han bygge endnu et på Sjælland
Se alle »
Computerworld
Teaser billede
Omfattende netværksproblemer hos TDC: Nu er årsagen muligvis fundet
Læs mere »
Stortest: Med USB-C skulle alle kabler være lige - men det er de bare slet ikke
Nørgaard: Sådan spotter du en russisk påvirkningsagent i dit netværk - brug de fem nemme spørgsmål
Prøvekørt: Volkswagens nye familieraket er en lidt for frisk storcharmør
Se alle »
CIO
Teaser billede
Leverandør til 50 danske kommuner ramt af ransomware: "Det er ikke sjovt," siger direktør Thomas à Porta
Læs mere »
Microsoft hæver priserne på M365: Sådan kommer de nye priser til at ramme
Tidligere Norlys-CIO Morten Bilgrav Mathiasen lander topjob i dansk milliard-koncern
Sådan bør du håndtere Microsofts nye prisstigninger - måske er der fordele at hente
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Twoday er rykket til et af de dyreste postnumre i Danmark – og det kan betale sig, siger topchef Lars Berthelsen
Se alle »
White paper
Teaser billede
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Læs mere »
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Se alle »

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