[CSS] Een CSS achtergrond schalen naar 100% v/d pagina - Softwareontwikkeling

zondag 26 augustus 2007 21:55

Acties:

Topicstarter

Ik wil graag weten hoe je een achtergrond die met CSS geimplementeerd is schaalt naar 100% van de pagina.
Ik heb google al afgezocht maar niets kunnen vinden.

voorbeeld:

code:

body
{
background-image: url(achtergrond.png);
background-position: center center;
background-repeat: no-repeat;
}

Het probleem hierbij is, is dat de achtergrond niet groot genoeg is om de pagina te bedekken bij hogere resoluties, daarom wil ik de achtergrond schalen naar 100%.
Weet iemand of dit mogelijk is en hoe dat dan moet?

zondag 26 augustus 2007 22:02

Acties:

SKiLLa

Byte or nibble a bit ?

Volgens mij kan dat niet met de CSS background property. Je kan een normale IMG wel tot 100% schalen, je zou dus b.v. met een IMG een background-layer van 100% bij 100% kunnen maken ...

'Political Correctness is fascism pretending to be good manners.' - George Carlin

zondag 26 augustus 2007 22:24

Acties:

Arcane Apex

Topicstarter

Dat heb ik geprobeerd, echter blijven er altijd onbedekte randen over in IE.

zondag 26 augustus 2007 22:31

Acties:

Duroth

No rest for the tweaked

code:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Bovenstaande Javascript code is bedoeld om PNG-afbeeldingen (edit: moet dus Achtergronden zijn) correct (dus transparant) weer te geven in oudere versies van IE (6.0 -). Een 'nare' bijwerking is wel dat deze PNG afbeeldingen geschaald worden naar 100% hoogte / breedte. Aangezien dit precies is wat jij wilt, kan dit een optie zijn.

(Let wel op, dat dit een nogal vervelende oplossing is, en ook zeker niet ideaal)

Een andere oplossing is misschien om van de betreffende achtergrond een afbeelding te maken, en de volledige content met een div style="position: absolute;" eroverheen weer te geven. Ook weer een workaround, maar dat is er wel één die gegarandeerd werkt.

(Persoonlijk weet ik niet of het wel mogelijk is om de hoogte en breedte van een background in te stellen zonbder dit soort truukjes)

zondag 26 augustus 2007 23:45

Acties:

MissingDog

Arcane Apex schreef op zondag 26 augustus 2007 @ 22:24:
Dat heb ik geprobeerd, echter blijven er altijd onbedekte randen over in IE.

liggen die onbedekte randen niet aan het feit dat een gerenderde page altijd margins bevat, tenzij je deze op 0 zet in je css?

zondag 26 augustus 2007 23:56

Acties:

mithras

MissingDog schreef op zondag 26 augustus 2007 @ 23:45:
[...]

liggen die onbedekte randen niet aan het feit dat een gerenderde page altijd margins bevat, tenzij je deze op 0 zet in je css?

Er zit een grote kans in dat body en/of html geen nul-margin expliciet heeft meegekregen. Dat zou ik dus eerst proberen

maandag 27 augustus 2007 00:32

Acties:

Arcane Apex

Topicstarter

yep,

het was inderdaad de margin. Ik heb deze toegevoegd in de css file aan de body en de randen verdwenen.
Het enige probleem dat ik nu nog heb is dat er een overflow van de image is die ik als achterond gebruik in IE6. (niet in Firefox)
Het achtergrondplaatje is in de hoogte groter dan de pagina, echter heb ik het de width en height 100% meegeven in de css file. Echter lijkt dit alleen correct te werken in Firefox, maar niet ik IE6, daar kun je namelijk nog verticaal scrollen.
Weet iemand hoe dit op te lossen is? Ik heb hier en daar in de css file al geprobeerd overflow: hidden; te plaatsen, maar het lijkt geen effect te hebben in IE6.

maandag 27 augustus 2007 15:17

Acties:

Arcane Apex

Topicstarter

Ik het het overflow probleem opgelost door overflow:hidden toe te passen op de html tag ipv andere sub tags en toen bleek de overflow wel te verdwijnen in IE6.

code:

1	html { overflow: hidden; }

[ Voor 8% gewijzigd door Arcane Apex op 27-08-2007 15:18 ]