Dubbele achtergrondafbeelding

  • Onderwerp starter Onderwerp starter Erat
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
E

Erat

Gebruiker
Lid geworden
12 jan 2010
Berichten
45
Ik werk met Namo editor 3 (!) en ik wil twee achtergrondafbeeldingen als achtergrond; eentje als kop en daaronder eentje die zichzelf steeds horizontaal herhaalt.
Ik heb gezocht op internet en kom o.a. deze tegen:

html { background:url(farthest.png) 0% 0% repeat-x; }
body { background:url(nearest.png) 0% 0% repeat-y; }

en:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Double Backgrounds with CSS - CSS/XHTML Tutorial by Soh Tanaka</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background: #e5e5e5 url(bg_body.gif) repeat-x;
	position: relative;
}
#bg_wrap {
	height: 96px;
	width: 50%;
	right: 0;
	background: url(bg_wrap.gif) repeat-x;
	position: absolute;
}
.container {
	width: 960px;
	background: #e5e5e5;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
</style>
</head>

<body>
	<div id="bg_wrap"></div>
	<div class="container">
		<img src="header.gif" alt="" />
	</div>
</body>
</html>
en:
Code: 
html {
 
background: url(images/back_color.png);
 
height: 100%;
 
}
 
body {
 
background: url(images/back.png) repeat-x;
 
margin: 0;
 
padding: 0;
 
height: 100%;
 
}
 
html&gt;body {
 
 min-height: 100%;
 
 height: auto;
 
}
maar ik krijg ze niet werkend. Ligt dat aan mijn oude webeditor of aan het feit dat ik het niet juist doe?
En hoe moet het dan wel?
 
Laatst bewerkt door een moderator:
Je hebt wel grondig gezocht, maar helaas alleen dingen gevonden die gewoon niet kunnen werken. Althans niet voor wat jij wilt.
De body komt boven de html te staan, dus elke achtergrond die je aan de body geeft zal de achtergrond van de html verstoppen. Dat geldt voor oplossing nummer 1.
Zelfde geldt voor de derde oplossing.
Je zou aan de body 'n marge aan de bovenkant kunnen geven zodat de achtergrond-afbeelding van de body onder die van de html komt te staan, maar dat is geen goed idee omdat er voor allerlei dingen vanuit wordt gegaan dat de body bovenaan in het venster begint.

'n Mogelijkheid zou kunnen zijn om in de body 'n achtergrond-afbeelding te gebruiken, waarboven je 'n doorzichtige strook zet. Daardoorheen zie je dan de achtergrond-afbeelding in de html. Dus de gewone afbeelding waar je 'n extra strook aan de bovenkant aan vast monteert.

De tweede oplossing zou kunnen werken, maar er zitten fouten in. Dit zou beter moeten werken:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
       margin: 0; padding: 0;
       background: #e5e5e5 url(002-t.jpg) repeat-x;}
              /* bovenste afbeelding gewoon in de body zetten */
#bg_wrap 
       {height: 96px;        /* hoogte moet even hoog zijn als je afbeelding */
        width: 100%;        /* omdat deze absoluut is gepositioneerd, heeft hij anders geen breedte */
       background: url(006-t.jpg) repeat-x;
       position: absolute;
       left: 0;                     /* is nodig voor die onwijze IE 6 en 7 */
        top: 180px;}          /* top afhankelijk van grootte bovenste afbeelding */
.container {width: 960px; height: 70px;
       background: #e5e5e5; margin: 0 auto;}
             /* alles in .container heb ik alleen even zo gedaan om 't zichtbaar te maken, kan allemaal worden veranderd */
</style>
</head>
<body>
<div id="bg_wrap"></div>
<div class="container">Hierin komt de pagina te staan.</div>
</body>
</html>

001-t.jpg en 006-t.jpg zijn gewoon kleine plaatjes die ik even heb gebruikt.
Omdat #bg_wrap absoluut is gepositioneerd, komt .container er gewoon overheen te staan. Wat ook de bedoeling is, want het gaat om 'n achtergrond-afbeelding.
 
Als ik het zo probeer, dan verdwijnt dit stuk:

<div id="bg_wrap"></div>
<div class="container">Hierin komt de pagina te staan.</div>

en het wordt vervangen door:

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="left">Hierin komt de pagina te staan.</p>
 
Als dat automatisch wordt vervangen, werk je met 'n prehistorische editor. Ik ken dat namo (of hoe heet 't precies) niet, dus de versie zegt me ook niets.
Als die div vervangen wordt door 'n <p>, dan kun je 't schudden met die editor. Die is dan echt te oud om nog mee te kunnen werken.

Gebeurt er dit:
Je stopt de code van mij in je editor, op een of andere manier.
Je gaat 'm bekijken in je browser of zo en dan is de <div> (en van alles meer) opeens veranderd door de editor?

Edit: als 't aan de editor ligt, zou je kunnen overwegen zelf html, css, e.d. te leren. Of je kunt overstappen op 'n betere, nieuwere editor, zoals Kompozer. Dat is gratis en maakt betere code. Maar het beste is om zelf html en zo te leren.
 
Laatst bewerkt:
Ja, met Namo Editor 3 werk ik al een eeuwigheid en ik kan ermee lezen en schrijven dus ik ben nooit overgestapt naar nieuwere versies die waarschijnlijk al die nieuwe dingen wel kunnen. Ze zijn inmiddels al toe aan 8, dus kan je nagaan. ;)

En ja, het wordt dus gewoon vervangen door de editor zelf. Ik voeg hem toe in de html code en dan kijk ik bij preview of bij edit en dan weer in de html code en dan is die code dus gewijzigd.
Het ligt dus aan de editor. ;)

Ik zag dat Kompozer niet meer ondersteund werd? Of was dat Nv?
Ik heb altijd begrepen dat sites gemaakt met Namo heel snel laden. In tegenstelling tot Dreamwaver of Frontpage of zo.

Ik begrijp in ieder geval dat wat ik wil, niet mogelijk is in mijn oude editor.
Bedankt voor de hulp en uitleg. :)
 
Nee, dat kun je dan vergeten in je editor. En nog heel veel meer, vrees ik.
Dat snelle laden zou ik zo niet weten. Het is wel zo dat élke editor er veel meer code in stopt dan wanneer je 't met de hand maakt (als je 't goed doet, ook met de hand kun je natuurlijk spaghetti-code maken).
FrontPage is inderdaad heel erg, maar dat komt ook omdat het stamt uit de tijd van de browser-oorlog, toen allerlei bedrijven hun code expres zo maakten dat hij door de browser van de concurrent niet was te lezen. Ik word nog wel 'ns gillend wakker 's nachts als ik daar wat over heb gelezen.
Wat laadtijd betreft maakt het tegenwoordig, in ieder geval in West-Europa, niet zo veel meer uit, denk ik. Dat is tekst en dus per definitie heel weinig bytes. En met de tegenwoordige verbindingen moet je toch wel heel erg je best doen om zoveel code te produceren dat je 't echt merkt.
Aantal bestanden en grootte van afbeeldingen en zo speelt nog wel.

Kompozer wordt nog actief onderhouden. Het is de opvolger van nvu, maar heeft om juridische redenen 'n andere naam.
Mocht je 't willen downloaden: http://www.kompozer.net/download.php

Overigens: die code die Namo maakt (althans jouw versie) zorgt mogelijk ook voor weergaveverschillen tussen browsers.
 
Ik heb zowaar ontdekt dat mijn antieke editor met lagen kan werken. Dus ik kan een achtergrondafbeelding gebruiken en daarover een ander! Hoe is het mogelijk! Probleem opgelost. :D

Blijven wat andere dingetjes over (zoals kleuren van links) die het wellicht rechtvaardigen een nieuwere versie aan te schaffen. Ik heb al weleens een trail gedownload, maar dan is alles weer zo anders... dat is met Windows ook altijd zo. Ben je gewend aan XP, zit bij 7 alles weer anders en kunnen er dingen weer niet. Zucht.

Bedankt in ieder geval voor de hulp. :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan