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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 I går 15:11
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
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 går 15:05 Excel ark oplåsning Af FinnLauridsen i Excel
I går 13:39 Postman Af OBS i Andet software
16/0911:19 Google maps - downloaded - samlet overblik? Af 1Dorte i Andet software
15/0913:51 Smarthome system Af Vesterlund i Andet hardware
12/0915:18 Valg af vejrstation Af KurtG i Andet hardware
White papers
Flere white papers »


Premium
Teaser billede
Ny AI-model er trænet på sundhedsdata fra millioner af danskere: Kan forudse din risiko for mere end 1.000 sygdomme
Læs mere »
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Det benytter de den danske supercomputer Gefion til: Topchef Nadia Carlsten løfter sløret for AI-computerens brugere
Support til Exchange 2016 og 2019 udløber om mindre end en måned: Sådan bør du gøre ifølge Microsoft
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Apples nye AirPods Pro 3 er proppet med nyt – nu er det meget mere end nogle høretelefoner
Microsoft løfter sløret for næste generation af selskabets udbredte kodeværktøj: Kan prøves allerede nu
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Se alle »
CIO
Teaser billede
Til kamp mod legacy og teknisk gæld: Uffe har skrottet 200 servere og 1.000 routere og switches på 140 lokationer
Læs mere »
Microsoft opsplitter Office og Teams: Sådan fungerer opdelingen
Overgangen til Windows 11 kan udløse store bøder, hvis du ikke passer på
Region Sjælland dropper kæmpe Oracle-planer til 150 millioner kroner: Skifter til SAP
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Lille dansk it-virksomhed fra Vanløse lander drømmekontrakt, der rækker langt ind i stifterens pension
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Sådan samler du virtualisering og containerdrift i én løsning
Læs mere »
Sådan får du succes med AI i hele organisationen
Sådan får du succes med AI i hele organisationen
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Se alle »

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