Belangrijk: ComputerIdee Forum Huisregels | Wachtwoord vergeten?

Ga terug   Computer Idee Forum > Internet > Websites maken

Notices

Antwoord
 
Discussietools Weergave
Oud 16 January 2018, 21:59   #1
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard 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:
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?
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Oud 16 January 2018, 23:59   #2
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard

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.
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Oud 17 January 2018, 00:37   #3
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard

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

Voor volledig scherm was me het eerste regeltje al bekend:
Code:
background-size: cover;
dan om te zorgen dat de achtergrond blijft staan en je tekst gaat scrollen even het volgende regeltje toevoegen:
Code:
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!
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Oud 17 January 2018, 07:17   #4
FooBar
 
FooBar's schermafbeelding
 
Geregistreerd: 21 May 2005
Locatie: Elders
Berichten: 14.095
Standaard

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.
FooBar is offline   Met citaat antwoorden
Oud 17 January 2018, 12:52   #5
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard

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!
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Oud 17 January 2018, 13:15   #6
dappertje
 
dappertje's schermafbeelding
 
Geregistreerd: 27 May 2009
Berichten: 703
Standaard

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

Gelukkig hoef ik niet zelf op mijn eten te jagen,
Ik zou niet eens weten waar gevulde koeken leven.....
Niets is zeker en zelfs dat niet......
dappertje is offline   Met citaat antwoorden
Oud 17 January 2018, 16:39   #7
FooBar
 
FooBar's schermafbeelding
 
Geregistreerd: 21 May 2005
Locatie: Elders
Berichten: 14.095
Standaard

Citaat:
Oorspronkelijk geplaatst door dappertje Bekijk bericht
.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.
FooBar is offline   Met citaat antwoorden
Oud 17 January 2018, 13:26   #8
dappertje
 
dappertje's schermafbeelding
 
Geregistreerd: 27 May 2009
Berichten: 703
Standaard

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

Gelukkig hoef ik niet zelf op mijn eten te jagen,
Ik zou niet eens weten waar gevulde koeken leven.....
Niets is zeker en zelfs dat niet......
dappertje is offline   Met citaat antwoorden
Oud 17 January 2018, 14:49   #9
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard

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.
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Oud 17 January 2018, 17:32   #10
BlackTiger
 
BlackTiger's schermafbeelding
 
Geregistreerd: 4 May 2005
Locatie: State Penitentiary
Berichten: 11.171
Standaard

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.
__________________
Greetings, Black Tiger

-----------------------------
Domme vragen bestaan niet. Het is dom om een vraag te hebben en deze niet te stellen.
BlackTiger is offline   Met citaat antwoorden
Antwoord

Discussietools
Weergave

Regels voor berichten
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Aan
Smileys zijn Aan
[IMG]-code is Aan
HTML-code is Uit

Forumnavigatie


Alle tijden zijn GMT +1. Het is nu 07:38.


Powered by vBulletin Version 3.8.6
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.