3 Achtergrondafbeeldingen

[et_pb_section bb_built=”1″][et_pb_row][et_pb_column type=”3_4″][et_pb_text _builder_version=”3.0.92″ background_layout=”light”]

Je kan op diverse plekken op je site vaste afbeeldingen plaatsen.
Volledige pagina – Achtergrond afbeelding pagina: een achtergrond plaatje voor je hele site. Dit is het tweede wat de bezoeker ziet. Eerst ziet je bezoeker in een flits de kleur die je hebt ingesteld bij achtergrondkleur pagina.  Zoek een kleur die past bij je plaatje, dan valt de flits minder op. De flits valt ook minder op als het plaatje snel geladen kan worden. Zorg dus ook voor een “licht”, gecomprimeerd plaatje (voorbeeld 1). Je kan ook een heel klein plaatje gebruiken (voorbeeld 2).

De achtergrondafbeelding paginastramien komt terecht achter het tekstgedeelte. Meestal is bij het thema ingesteld dat het hoofdgedeelte een eigen kleur heeft, meestal wit. Als je dit verandert in “transparent”, dan komt je tekst echt rechtstreeks hierop uit. Bij mijn favoriete thema “schone lei” moet je juist zelf deze achtergrondkleur hoofdgedeelte  instellen op wit. NB: als je het plaatje te klein maakt, komt je tekst terecht op de achtergrondkleur van de pagina. Je kan dan ofwel zorgen dat de tekst niet te lang wordt; of kies een handige achtergrond kleur en zorg dat de kleuren overlopen.

Beide plaatjes (achtergrondafbeelding paginastramien en achtergrondafbeelding  pagina) kunnen elkaar aanvullen: de ene staat bijvoorbeeld midden boven, de ander midden onder  (voorbeeld 4). Je krijgt ook een mooi effect als je een van beide soorten afbeeldingen zich laat herhalen (voorbeeld 5).

Je kan een plaatje plaatsen op het hoofdgedeelte (voorbeeld 6) en in de koptekst (voorbeeld 7).

voorbeeld site met groot plaatje1Het plaatje is bewust vervaagd en hierdoor kleiner in pixels geworden. Het laadt sneller, wat fijn is voor je bezoekers. Verklein een plaatje tot bijvoorbeeld 1600px breed en 1200px hoog en sla hem gecomprimeerd op, tot hij niet groter is dan 100 a 150 kB. 1600px x 1200 px is op dit moment de maat van een groot beeldscherm. Je kan wel een kleiner plaatje gebruiken, zorg in dat geval voor een mooie bijpassende achtergrondkleur.
FireShot Screen Capture #302 - 'Photoshop bij Kellerhuis' - sites_google_com_a_karlamulder_nl_photoshop-bij-kellerhuis2

  • Thema: schone lei
  • Site indeling: breedte 800 px; koptekst: 200px; voettekst 1000px
  • Volledige pagina: achtergrond kleur: #000 (zwart)
  • Volledige pagina: achtergrond afbeelding: blauwe vlinder
    • Instelling: herhalen: geen
    • horizontale positie: rechts
    • verticale positie: boven
FireShot Screen Capture #298 - 'schonelei_pagstramien' - sites_google_com_a_karlamulder_nl_schonelei_pagstramien3

  • Thema: schone lei
  • Site indeling: breedte 760 px; koptekst: 200px; voettekst 300px
  • Volledige pagina: achtergrondkleur pagina: #fff (wit)
  • Volledige pagina: achtergrond afbeelding:
    • Instelling: herhalen: horizontaal
    • horizontale positie: links
    • verticale positie: bovenblauw wit verloopVert1
  • Volledige pagina: achtergrondafbeelding paginastramien: plaatje met verlopende kleur van paars naar wit. NB: het originele plaatje is 900 px breed; Bij het importeren werd het verkleind naar 759px.
    • Instelling: herhalen: geen
    • horizontale positie: midden
    • verticale positie: bovenblauw wit verloopVert1b (plaatje bekijken)
FireShot Screen Capture #297 - 'schonelei_pagstramien2' - sites_google_com_a_karlamulder_nl_schonelei_pagstramien24

  • Thema: schone lei
  • Site indeling: sitebreedte 760 px; koptekst: 200px; voettekst 50px
  • Volledige pagina: achtergrondafbeelding paginastramien: de bovenkant:
    • Instelling: herhalen: geen
    • horizontale positie: midden
    • verticale positie: bovenblauw wit verloopVert1b
  • Volledige pagina: achtergrondafbeelding: hetzelfde plaatje maar dan 180 graden gedraaid:
    • Instelling: herhalen: geen
    • horizontale positie: midden
    • verticale positie: onderblauw wit verloopVoetGroot

Ook hier ging het bij het uploaden niet soepel. Ik plaatste de afbeelding voor de Volledige pagina – achtergrond afbeelding pagina en toen raakte de andere afbeelding blijkbaar zoek. Opnieuw geupload.

http://tips-googlesite.karlamulder.nl/5

  • Thema: standaard
  • Site indeling: sitebreedte 75{a917afa82aadec12011492663df879025eaf8ce021658d29eab592517aeff41a}; koptekst: logoformaat; voettekst: hoogte afhankelijk van content
  • Volledige pagina: achtergrondafbeelding pagina
    • Instelling: herhalen: geen
    • horizontale positie: midden
    • verticale positie: boven1-variegated-ivy-background
  • Hoofdgedeelte: achtergrondkleur hoofdgedeelte: #fff

Het maakt niet uit of je het plaatje instelt bij achtergrondafbeelding  pagina of bij achtergrondafbeelding paginastramien. De witte kleur van het tekstdeel is nu bepaald door: Hoofdgedeelte: achtergrondkleur hoofdgedeelte: #fff

FireShot Screen Capture #300 - 'www_stichtingpassievoorzorg_nl' - www_stichtingpassievoorzorg_nl6

  • Thema: schone lei
  • Site indeling: sitebreedte 960 px; koptekst: 80px;
  • Volledige pagina: achtergrondkleur: #6c48d7
  • Hoofdgedeelte: achtergrondafbeelding hoofdgedeelte:
    • Instelling: herhalen:
    • horizontale positie: links
    • verticale positie: boven
7Afbeelding in koptekst: Hier is gekozen voor horizontaal herhalen. Afhankelijk van de breedte van iemand’s beeldscherm wordt het plaatje herhaald. NB: kies een plaatje voor je koptekst van maximaal 800 px breed, zodat ook de mensen met een klein beeldscherm het nog kunnen zien.

Websites die kant-en-klare kleine plaatjes (zogeheten seamless tiles oftewel naadloze tegels) aanbieden: http://silviahartmann.com/background-tile/6-grass-meadow-tile.php (nieuw venster)(veel natuur) http://www.ozones.com/backgrounds/  http://www.webweaver.nu/clipart/background-textures3.shtml  http://www.grsites.com/archive/textures/  papier  Zelf doen: http://www.grsites.com/archive/textures/ Zelf de structuur en kleur kiezen) http://www.tilemachine.com/# (zelf een plaatje maken, met een soort paint programma) Je vindt er vast nog meer door te googelen naar “tile seamless” https://sites.google.com/a/karlamulder.nl/tips-googlesite/vormgeving/uiterlijk

[/et_pb_text][/et_pb_column][et_pb_column type=”1_4″][et_pb_sidebar admin_label=”menu uiterlijk def” _builder_version=”3.0.92″ area=”et_pb_widget_area_3″ orientation=”right” show_border=”on” background_layout=”light” body_text_color=”#0a4391″ border_width_all=”5px” border_color_all=”#0a4391″ box_shadow_style=”preset1″ module_class=”zijmenu” saved_tabs=”all” global_module=”1553″ /][/et_pb_column][/et_pb_row][/et_pb_section]