Afbeelding in css vraag

Ik heb een achtergrond afbeelding nodig in mijn .css en dat zou op zich niet moeilijk moeten zijn.
Jasper van hier op 't CID forum heeft dat hier ooit eens voor me gemaakt, het gaat om deze code:

html {
background-color : #283CCD;
}
body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
margin : 25px;
font-size : small;
}
img {
border : none;
}
a {
color : #333333;
text-decoration : underline;
}

Op die margin wat er staat, dus 25px van de bovenkant, begint eigenlijk mijn website zodat hij niet helemaal boven tegen staat.
Maar natuurlijk moet de afbeelding wel schermvullend zjin. Als ik de afbeelding daar bij zet, neemt hij ook die 25px margin over en dat is niet de bedoeling.

In een ander stukje software zag ik 2x een body tag, een keer met een margin voor het site gedeelte en 1x zonder margin voor de achtergrond.
Maar als ik een tweede body tag in m'n css aan maak dan pakt ie dat niet. Dus die andere css zal wel iets anders in elkaar steken.

Wat die "img" tag hier doet weet ik ook niet precies.

Hoe krijg ik hier nu netjes in css een schermvullende afbeelding achter?

Om het nog iets moeilijker te maken, liefst zou ik 't zo hebben dat de afbeelding automatisch de resolutie van de gebruiker detecteert en aldus zichzelf kleiner maakt (want hij is al vrij groot qua resolutie) en dat de rest van de site, dus zeg maar de tekst en andere evt. afbeeldingen, er bovenop komen.

Zodat dus de achtergrond altijd vast blijft staan, maar de rest van de site kan scrollen als die langer is dan het beeldscherm.
Eigenlijk zoals Wordpress dat ook doet/kan. Schermvullende achtergrond waarop de tekst kan scrollen.

Na wat hard zoeken opgelost. Mocht iemand hier ook ooit naar op zoek zijn:

Voor volledig scherm was me het eerste regeltje al bekend:

background-size: cover;

dan om te zorgen dat de achtergrond blijft staan en je tekst gaat scrollen even het volgende regeltje toevoegen:

background-attachment: fixed;

Zoals gezegd moest ik deze in de header tag zeggen vanwege de margin in de body. Maar mocht je een andere css maken waarin tekst achtergrond apart in de body komt voor de margin kun je dit misschien ook gebruiken.

Maar ik ben maar een prutser in css dus als ik 't fout heb laat ik me graag corrigeren!

In html+css zijn er vaak meerdere wegen naar Rome, dus als het welkt is het niet per se fout. In dit geval zou je kunnen overwegen om je body margin in te wisselen voor een padding. Dat zou visueel niet uit moeten maken en dan kan je de achtergrond wel aan je body hangen.

Voor het begrip: margin is de buitenmarge en padding de binnenmarge.

background-attachment:fixed is overigens sowieso goed en heb je in alle gevallen nodig. Tot slot, weet dat background-size niet werkt in IE8 of ouder, maar ik weet niet of je dat erg moet vinden.

Aha, kijk weer iets bijgeleerd. Goed om te weten wat die padding dan is.
Ik had inderdaad wel iets gelezen over werking van bepaalde zaken in IE8 en ouder. Maar dat leek me inderdaad niet erg. Als iemand nog met zo'n oude browser zit te werken hoeft ik 'm niet perse op die site.

Bedankt voor de uitleg!

.img
{
height: 100vh;
width: 100vw;
}

screen size is niet altijd goed daar niet iedereen alle full screen draait

Maar vaste waardes ook niet want dan kan het nogal klein worden als je een hogere resolutie draait.
Als je full screen neemt en iemand maat het scherm kleiner dan verkleind alles mee als ie op cover staat. Dat had ik gisteren wel nog uitgeprobeerd.
En met vaste waardes krijg je op hogere resoluties ook weer vaste kleur i.p.v. achtergrond, dat was niet de bedoeling.

Maar toch bedankt voor de tip.

Oorspronkelijk geplaatst door dappertje

.img
{
height: 100vh;
width: 100vw;
}

Dat doet op zich nog niks voor een achtergrondafbeelding. Maar toch bedankt, want vh en vw als eenheden kende ik dan weer niet! Komt misschien nog een keer van pas.

Ja ik las dat ook maar dacht dat het om vaste waardes ging zoals in pixels.

Maar hoezo doet dat niets voor een achtergrond afbeelding dan? Want er staat toch dat het te maken heeft met het browservenster? Dus als je de browser kleiner maakt dan wordt de view van de browser toch ook kleiner?

Alleen ben ik een noob in CSS en begrijp dus niet goed welk voordeel VH en VW zou hebben ten op zichte van de cover background-size.
Aangezien die met het verkleinen van je browserscherm ook gewoon mee verkleind.
Wel kan het problemen geven met sommige browsers op Android en bijv. printen met Google.

Op dit moment zijn in elk geval alle pagina's W3C valid en dat is ook wel leuk.