{"id":972,"date":"2022-02-14T12:48:03","date_gmt":"2022-02-14T12:48:03","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/een-achtergrondafbeelding-aan-een-sectie-toevoegen\/"},"modified":"2024-01-03T15:16:44","modified_gmt":"2024-01-03T15:16:44","slug":"een-achtergrondafbeelding-aan-een-container-toevoegen","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=een-achtergrondafbeelding-aan-een-container-toevoegen","title":{"rendered":"Een achtergrondafbeelding aan een container toevoegen &#038; instellen"},"content":{"rendered":"<blockquote><p>Er zijn 2 zaken belangrijk bij het invoegen van afbeeldingen op een website: de <strong><span style=\"color: var(--tcb-color-0);\">grootte<\/span><\/strong> en de <strong><span style=\"color: var(--tcb-color-0);\">Alt-tekst<\/span><\/strong><span style=\"color: var(--tva-skin-color-0);\">.&nbsp;<\/span><\/p><\/blockquote>\n<blockquote style=\"\"><p>Als je afbeeldingen invoegt die te groot zijn (vanaf 1 MB), dan gaat de ruimte op je site snel vol zitten en gaat alles ook trager laden. <a data-tcb_hover_state_parent=\"\" href=\"#tve-jump-17eca6535d3\" style=\"outline: none;\"><span style=\"text-decoration: underline;\">Klik hier<\/span><\/a> om de video te bekijken over <strong>afbeeldingen comprimeren<\/strong> (= kleiner maken). Liefst zijn afbeeldingen voor een website kleiner dan 400 KB.<\/p><\/blockquote>\n<blockquote style=\"\"><p>Het is belangrijk voor de SEO (Search Engine Optimalisation, <a data-tcb_hover_state_parent=\"\" href=\"https:\/\/leeromgeving.fixityourself.be\/course\/1-basis-seo-instellen-met-yoast-seo\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">zie module 8<\/a>) dat je de <strong>Alt-tekst <\/strong>van een afbeelding invult. Wanneer mensen een zoekterm invullen in Google, zal die ook op afbeeldingen zoeken. Hoe meer relevante zoektermen er op je website staan, hoe beter.<\/p><\/blockquote>\n<ul>\n<li>Zorg ervoor dat de container geselecteerd is door op de bolletjes in het roze vak te klikken bovenaan<\/li>\n<li>Klik links bovenaan in de instellingen op het tabblad&nbsp;<em>Stijl&nbsp;<\/em>en vervolgens op<em>&nbsp;Klassiek <\/em>(icoon met het verfborsteltje)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1644\" width=\"242\" data-init-width=\"596\" height=\"1070\" data-init-height=\"1070\" title=\"Screenshot 2023-04-20 at 09.30.03\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.30.03.png\" data-width=\"242\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Klik daarna op het plusteken onder&nbsp;<em>Afbeelding<\/em> in het grijze vlak<\/li>\n<li>De mediabibliotheek wordt geopend. Kies een bestaande afbeelding of upload een nieuwe afbeelding door te klikken op&nbsp;<em>Bestanden uploaden<\/em><\/li>\n<li>Geef de afbeelding een logische titel en alt-tekst (meestal zijn beide hetzelfde)<\/li>\n<li style=\"\">Klik rechts onderaan op&nbsp;<em>Media invoegen<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"576\" width=\"265\" data-init-width=\"596\" height=\"558\" data-init-height=\"1256\" title=\"Screenshot 2022-02-05 at 16.04.43\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-16.04.43-e1644073606247.png\" data-width=\"265\" data-height=\"558\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<p>Het is normaal dat je de afbeelding niet (of bijna niet) ziet, dat komt omdat de nodige instellingen nog niet gebeurd zijn.<\/p>\n<h4>DE INSTELLINGEN VAN EEN ACHTERGRONDAFBEELDING WIJZIGEN<\/h4>\n<ul>\n<li>Zorg ervoor dat de sectie geselecteerd is door op de bolletjes in het blauwe vak te klikken bovenaan<\/li>\n<li>Klik links bovenaan in de instellingen op het tabblad&nbsp;<em>Stijl&nbsp;<\/em><\/li>\n<li><\/li>\n<li style=\"\"><strong>Positie: <\/strong>afhankelijk van waar je de afbeelding wil plaatse ten opzichte van de sectie, kies je bij <em>Positie<\/em>. In het voorbeeld (en dat zal meestal wel het geval zijn) gebruiken we<em>&nbsp;<\/em><strong>Midden gecentreerd<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"577\" width=\"223\" data-init-width=\"586\" height=\"441\" data-init-height=\"1158\" title=\"Screenshot 2022-02-05 at 17.13.54\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.13.54.png\" data-width=\"223\" data-height=\"441\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><strong>Vastzetting:<\/strong> hiermee kan je de afbeelding vastzetten, dat wil zeggen dat wanneer je scrollt, de afbeelding blijft vast staan en alles wat daar rond ligt over de afbeelding schuift (zie voorbeeld hieronder) -&gt; klik daarvoor op <em>Vast<\/em>. In het voorbeeld gaan we dit niet doen en blijft het op <strong>Standaard <\/strong>staan<\/li>\n<\/ul>\n<ul>\n<li style=\"\"><strong>Herhalen:&nbsp;<\/strong>wanneer dit op&nbsp;<em>Standaard<\/em> blijft staan of wanneer je dit op <em>Herhalen<\/em> zet, zal de afbeelding zich naast, boven en onder herhalen indien het standaard formaat van de afbeelding de container niet volledig vult. Meestal ziet dit er vreemd uit dus gaan we voor <strong>Geen herhaling<\/strong><\/li>\n<li style=\"\"><strong>Afmeting:<\/strong> bij&nbsp;<em>Bedekken<\/em> gaat de volledige afbeelding de sectie bedekken van de linkerzijde tot de rechterzijde, bij <em>Inhouden<\/em> gaat de afbeelding zich aanpassen aan de grootte van de container. In dit voorbeeld gebruiken we <strong>Bedekken<\/strong><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><em>Bedekken<\/em><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"578\" width=\"329\" data-init-width=\"2424\" height=\"55\" data-init-height=\"402\" title=\"Screenshot 2022-02-05 at 17.51.12\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.51.12.png\" data-width=\"329\" data-height=\"55\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<p style=\"text-align: center;\"><em>Inhouden<\/em><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"579\" width=\"353\" data-init-width=\"2414\" height=\"53\" data-init-height=\"360\" title=\"Screenshot 2022-02-05 at 17.51.35\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.51.35.png\" data-width=\"353\" data-height=\"53\" style=\"\" loading=\"lazy\"><\/span><\/p>\n","protected":false},"template":"","class_list":["post-972","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-quick-fix","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/972"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}