Achtergrond en frames plaatsen in html

Status
Niet open voor verdere reacties.
S

Stev3n

Gebruiker
Lid geworden
30 mei 2011
Berichten
31
Ik heb een achtergrond voor mijn site en die wil ik plaatsen. Ik heb heel lang gezocht en ik vond dit soort dingen: <body style="background:#eee url(http://www.htmlcodes.me/images/backgrounds/background-image-2.gif) repeat fixed;">

<!-- Codes by HTMLcodes.me -->
<div style="background:url('http://www.htmlcodes.me/images/backgrounds/background-image-4.jpg') repeat-x bottom;color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.</div>
<p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/backgrounds/html-background-image.cfm">Background image codes</a></p>

Kan iemand me duidelijk uitleggen hoe het werkt?

GR.
Stev3n:cool:
 
Hoi Stev3n,
Het beste is om in de <head> van de pagina dit op te nemen:
Code: 
<style type="text/css">
body {
   background: [B]#FF0000 url[/B]([url]http://www.jouwsitenaam.nl/images/background-image.jpg[/url]) [B]repeat fixed 0px 0px[/B];
   }
</style>
Nog beter: dit opnemen in een stylesheet .css. Uitleg bv. hier: www.web-garden.be/cursushtml/Hoofdstuk%20XIII.pdf

In de html hoeft er op beide manieren niets opgenomen te worden in de <body> tag.
De background-style zit als volgt in elkaar:
  • De #FF0000 is de kleur (hier: knalrood) van de achtergrond in het gebied waar geen achtergrondafbeelding staat.
    Het is ook de paginakleur als de afbeelding niet gevonden kan worden, of als het tonen van afbeeldingen door de bezoeker is uitgezet.
    Als de afbeelding op herhalen staat, is er dus normaal gesproken niets van die kleur te zien.
  • De url(...) geeft de plaats op de site aan waar de achtergrond-afbeelding is te vinden.
  • Het repeat geeft aan dat het achtergrond-image herhaald moet worden. Als er niets bij staat, wordt de afbeelding zowel horizontaal als verticaal herhaald (aan elkaar geplakt; naadloos als de zijden van de afbeeldingen op elkaar aansluiten). Je kunt het "repeat" ook weglaten: dat is de standaard-instelling.
  • Met repeat-x laat je het achtergrond-img zich alleen horizontaal herhalen.
  • Met repeat-y ... je raadt het al.
  • Met no-repeat ... je raadt het al.
  • Met fixed geef je aan dat de achtergrond altijd op dezelfde plaats moet blijven staan. De standaard-instelling (als je "fixed" weglaat) is dat de background mee omhoog scrollt met de pagina (en ook link-rechts meegaat, bij een te brede pagina).
  • De maten 0px 0px geven de positie van de achtergrondfiguur aan: eerst horizontaal, dan verticaal. Hier begint de afbeelding dus in de linkerbovenhoek.
  • Met 50% 0px staat de afbeelding horizontaal gecentreerd, en begint bovenaan. Bij een repeat wordt dit als uitgangspunt gebruikt voor de afbeeldingen ernaast en/of er onder.
  • Met no-repeat 50% 20px staat de afbeelding horizontaal gecentreerd, en begint op 20px vanaf de bovenrand.
  • Enz.!
  • Attentie: als je repeat-y 50% 20px hebt, wordt boven het begin (op 20px van boven) de onderkant van de afbeelding gemonteerd, want ook boven het opgegeven beginpunt wordt herhaald!
  • In plaats van de maten in % of px kunnen ook de trefwoorden top, bottom, left, right en center gebruikt worden.
  • Het volledige verhaal staat hier in de css-specificatie.
  • Makkelijker te lezen is het CSS-tutorial op w3schools.com, onderdeel backgrounds.
  • Met de "Try it yourself" knoppen kan je het ook zelf online uitproberen. :)
  • Ook goed voor andere vragen!
Kan je hiermee uit de voeten?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Heel erg bedankt ik kab hiermee uit de voeten ja.

Maar is dit css?

En wat betekent dit dan: <style type="text/css">?
 
Maar is dit css?
Klik om te vergroten...
Yessir, dat is nou css: handig hè? :)

En wat betekent dit dan: <style type="text/css">?
Klik om te vergroten...
Dat is de instructie aan de browser dat wat tussen <style type="text/css"> en </style> staat gebruikt moet worden als css: voor de opmaak van de pagina.
Het type dat er bij staat, vertelt de browser hoe de code in dat blokje gelezen moet worden: gewone tekst-lettertekens die geldig zijn voor css-gebruik.
  • Bijvoorbeeld wat tussen /* ..... */ staat, is bij css commentaar, en geen style die toegepast moet worden.
  • Bij de code voor javascript (<script type="text/javascript">...</script>) moet de browser alles wat op dezelfde regel na twee // komt zien als commentaar, en niet als script dat moet worden toegepast. Er hoeft geen eindpunt voor te worden gemaakt.
  • Maar in css werken die //... niet (en dat geeft ook fouten in de css-resultaten).
  • En in gewone html-code is <!-- ... --> het signaal dat wat ertussen staat commentaar is, en geen html die gebruikt moet worden. Daar werken /*... */ en //... niet.
  • Zo hebben alle code-soorten zo hun eigen opvatting over hoe een commentaar moet worden aangegeven. - En ook over andere dingen.
  • Vandaar dat het belangrijk is om de browser met het type te vertellen in welke "taal" een brok code geïnterpreteerd moet worden.
 
Laatst bewerkt:
Oke dus css werkt wel in het kladblok en moet je het dan ook als een .css
Bestand opslaan?

En je moet dus OF een css site maken OF html.

En heeft html of css meer mogelijkhedenheden?

Bedankt voor het advies.
 
Stev3n zei:
Oke dus css werkt wel in het kladblok en moet je het dan ook als een .css
Bestand opslaan?

En je moet dus OF een css site maken OF html.
Klik om te vergroten...
Je kunt, zoals csshunter liet zien je CSS in de kop van je html document zetten, dat blijft dan gewoon een html document waar toevallig ook wat css code in staat. Als je CSS code erg lang is is het practischer om het in een apart bestand te zetten en dat vanuit je html bestand aan te roepen door
HTML: 
<link rel="stylesheet" type="text/css" href="locatievanjecssbestand.css" />
Je hebt dan dus én een html én een CSS bestand.
Stev3n zei:
En heeft html of css meer mogelijkhedenheden?
Klik om te vergroten...
Ze hebben totaal verschillende doelen. HTML wordt gebruikt om de structuur en de inhoud van je pagina aan te geven. Dit is een kop, dat een paragraaf, dat ding een lijst, enzovoorts. CSS kun je vervolgens gebruiken om vorm te geven aan die structuur. Koppen moeten groot en vet zijn, paragrafen kanariegeel en lijsten hebben een groene achtergrond. Je kunt met CSS ook, mede, bepalen, waar iets terecht moet komen. Als je alleen maar HTML zou gebruiken dan zouden alle elementen onder elkaar komen te staan en werd je website een soort hele lange lijst. Kortom, om een site te maken moet je HTML en CSS laten samenwerken.

Web-garden (zie mijn sig hieronder) heeft een goede inleiding in de combinatie van html en css
 
Laatst bewerkt:
Het werkt allemaal perfect, alleen iets simpels: hoe maak je ze groter?:o
Als ik de achtergrond van google afbeeldingen haal zie je ze 40x...
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan