[HTML/CSS] Background over een background

[Verwijderd]

Voor een bepaalde website zou ik graag twee backgrounds willen gebruiken. Een bovenin en een onderin. De rede hiervoor is omdat background1 een verticale gradient is die met 1px breedte over de x-as herhaald kan worden. Background2 is een (grote) foto die mee dient te groeien met de horizontale afmetingen van het scherm.

Wanneer ik beide combineer in een enkele achtergrond dan neemt de kwaliteit van background 1 af, neemt het aantal KB's toe en repeat background 1 niet. Voldoende redenen om het met twee achtergronden te proberen.

Ik ben aan de slag gegaan met een standaard oplossing als body background en html background. Dit werkt op zich prima maar het probleem is dat ik vanzelfsprekend content op de site heb staan. De HTML-background begint echter pas na de content. Ik krijg dus een lege ruimte achter de content (tekst, tabellen, buttons, etc).

Ik ben daarna aan de slag gegaan met divjes bijvoorbeeld:

code:

body { 
background: url(pattern.gif) repeat; 
} 

#wrapper { 
background: url(foto.jpg) repeat-y; 
}

Bij voorkeur wil ik echter niet met lagen werken en dat zou hierbij nodig zijn aangezien ik de achtergrond vanzelfsprekend achter de content.

Mijn vraag is of er iemand hier een oplossing zou hebben.

[Verwijderd]

Volgens mij is het oplossing met html / body tag op te lossen als je ze beiden op een hoogte van 100% zet, misschien kun je hier eens mee stoeien.

[Verwijderd]

Verwijderd schreef op donderdag 29 november 2007 @ 14:41:
Volgens mij is het oplossing met html / body tag op te lossen als je ze beiden op een hoogte van 100% zet, misschien kun je hier eens mee stoeien.

Ik begrijp niet helemaal wat je bedoeld.

[BtM909]

Je ontkomt er niet aan om of HTML en BODY te misbruiken of een div absoluut positioneren en een negatieve z-index te geven. Waarom je liever niet met lagen wilt werken ontgaat me een beetje omdat dat precies is wat je vraagt

[Verwijderd]

Volgens mij ontkom je gewoon niet aan verschillende lagen.

Persoonlijk gebruik ik altijd een div die de gehele pagina omsluit, in dat geval kan je gewoon een background in je body setten en een background in je pagina div. Dmv background-position kan je dan je background op de juiste positie zetten, dan hoef je in ieder geval niet te rommelen met z-index of zo (als je daaraan dacht)...

[Verwijderd]

Bedankt voor alle replies!

Ik had eigenlijk geen goede rede om het zonder lagen te willen. Ik dacht dat het wat minder compatible zou zijn maar ik heb net even gekeken in Iexplorer, Firefox, Safari en Opera en het werkt allemaal prima.

Ik ben er nu bijna uit. En heb het volgende:

code:

<img style=position:absolute; z-index:1; width:100%;} src="images/foto.jpg" alt="" title="" />
<div style="width:772px; z-index:2; position: absolute;">
#Alle content
</div>

De foto groeit nu mee (in de breedte) en ik gebruik de gradient als normale achtergrond. Het enige probleem dat er nog is is dat ik de foto graag pas wil laten beginnen vanaf 233px hoogte. Ik ben aan het googlen maar het is zonder de juiste terminologie lastig te omschrijven.

Een ander probleempje is dat wanneer ik Javascript voor mouse-overs toevoeg ik een leeg scherm in iexplorer krijg. In de overige browsers werkt het dan nog wel.

code:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

[ Voor 48% gewijzigd door Verwijderd op 29-11-2007 15:45 ]

[Verwijderd]

Het is gelukt! Om een of andere rede mocht het javascript in de headers niet onder het css-gedeelte staan. Zelfs bij het includen van css en js moest css onderaan staan.. vreemd.

Maar goed, het werkt allemaal wel universeel nu. Bedankt iedereen voor de input!

[ Voor 5% gewijzigd door Verwijderd op 29-11-2007 17:46 ]

[Verwijderd]

Toch nog een vraagje..

De laag waarin de grote foto staat heeft als breedte 100% en als hoogte niets omdat de foto anders teveel uit proporties getrokken wordt wanneer een scherm afwijkende afmetingen heeft. Op kleinere resoluties is de image in de hoogte daardoor net iets langer dan de pagina en onstaat een scrollbalk. Is het mogelijk de scrollbalk voor deze laag uit te schakelen?

Ik heb overflow:hidden; gebruikt in zowel de body als de laag maar zonder succes.