PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

achtergrond over achtergrond

Door Jurgen B op 07-12-2006 19:22
2.211 views
Hallo,

ik zit met een vrij lastige vraag en probeer het daarom zo duidelijk mogelijk uit te leggen!!

IK heb op dit moment een pagina met een achtergrond die mee groeit met de grootte van het scherm. Het ziet er als volgt uit:
http://img485.imageshack.us/img485/4855/voorbeeldaul0.jpg

Nou wil ik "zonnenstralen" op de achtergrond die ook mee groeien. Ik heb hiervoor een gif bestand gemaakt zonder achtergrond. Maar nu is mijn vraag hoe kan ik deze nou het beste toevoegen want een div die zo breed is als de afbeelding is niet mogelijk.

Dit is het totaal idee:
http://img503.imageshack.us/img503/296/voorbeeldyd8.jpg

Ik heb nu:

html,body {
margin: 0px;
padding: 0px;
color: #000000;
text-align: center;
font-family: verdana;
font-size: 0.85em;
background: url('images/bg.jpg') center;
background-repeat: repeat-y repeat-x;
background-position: center center;
}
J
Jurgen B
09-12-2006 01:21
Nu werkt het toch weer niet! :S
Y
Youri
09-12-2006 01:37
waarom moet ie perse transparant??het gaat om de achtergrond toch?
J
Jurgen B
09-12-2006 01:54
Ja,

Ik heb nu dit in mn head staan:

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   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
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->


Maar omdat de afbeelding uit mn CSS komt werkt het niet! Maar als ik de afbeelding in mn HTML zet werkt het wel maar aangezien de afbeelding 2000px breed is en de afbeelding zichtbaar moet zijn hoe groot het scherm groot is kan dat dus niet in HTML. TOCH?!
Y
Youri
09-12-2006 02:05
hmm kan je niet instellen dat je achtergrond niet herhaald wordt en gecentreerd wordt?
dan ben je toch van het probleem af?

zoals dit dus
body
{
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: top center
}


http://www.w3schools.com/css/pr_background-position.asp

J
Jurgen B
09-12-2006 02:07
Dat schiet dus niet op! En kijk dan ook even op de vorige pagina wat dat heb ik al!!

background: url('images/strepen.gif');
background-color: transparant;
background-repeat: no-repeat;
background-position: top center;

Y
Youri
09-12-2006 02:12
ja ok remember
maar snap nog niet helemaal waarom ie perse transparant moet
kan je niet gewoon al een plaatje van het eindresultaat eroverheen plakken?
is misschien even puzzelen dat de lijntjes geen break krijgen, maar is makkelijk te doen als je beide vanaf het midden plaatst...
J
Jurgen B
09-12-2006 02:22
Nee dat kan dus duidelijk niet! ;)

Probleem is nu inmiddels helemaal opgelost!! :D

Dit is de oplossing:

#stralen {
width: 100%;
height: 500px;
position: relative;
background: url('images/stralen.png');
background-color: transparant;
background-repeat: no-repeat;
background-position: top center;
}

*html #stralen /* Will only be seen by IE */
{
background: none;
filter:Progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/stralen.png',sizingMethod='scale');
}



Ingewikkeld probleem maar het is voorbij!
Y
Youri
09-12-2006 17:37
hmm je hebt wel nog een breukje in de lijntjes :P

Reageren

Inloggen om te reageren