[Opgelost] Doorzichtige header mbv png

[iFocus]

Hallo,

Ik heb een vraag omtrent de header, ik heb deze in .png en het bovenste gedeelte moet doorzichting worden, zodat je de achtergrond er doorheen ziet. Wat moet ik met de background-color doen om deze doorzichtig te laten worden?
(Ik weet dat ie6 geen .png ondersteund, daar hebben we al een andere oplossing voor )

Momenteel ziet het er zo uit: 

div#header {
   height: 164; /* adjust according your image size */
   background: #FF8000;           
}

div#header h1 a {
   background: #FF8000 url(uploads/site/header.png) no-repeat 0 0px;
   display: block;
   height: 164px;             
   text-indent: -999em;
   text-decoration:none;

Alvast bedankt!

Arjan

[Duketown]

iFocus,

Misschien heb je iets aan http://homepage.ntlworld.com/bobosola/pnghowto.htm, of dat alleen maar een oplossing voor het transparant zijn?

Duketown

[fleur]

Voor het bewerken van .png gebruik ik Macromedia Fireworks. Hiermee kun je de achtergrond van een image transparant maken met modify canvas, canvascolor,  kies optie transparant.

Wanneer je een transparante achtergrond wil hebben met kleur, dan met de Bitmap marquee tool een gekleurd vierkant maken en dan in de properties transparency op b.v. 50% zetten.

Of is dit niet wat je bedoelt?

[iFocus]

Ik ben bekent met fireworks, maar verkies meestal photoshop of illustrator boven fireworks. Maar de afbeelding voor de header heb ik al in .png, ik heb hem ook al in het cms staan, alleen is het doorzichtige deel van de afbeelding nu niet doorzichtig als je de site bekijkt.

http://arjanverhoef.nl/cmsms Dit is de link naar de tijdelijke site, voordat ik het naar thema omzet voor op de echte site.

Het bovenste witte gedeelte van de header moet doorzichtig zijn, maar is nu wit.

Ohja om de site zie je ook een dunne zwarte rand, hoe is die weg te krijgen?

Al wel bedankt voor jullie reacties

[Rolf]

Ohja om de site zie je ook een dunne zwarte rand, hoe is die weg te krijgen?

Dit pas je in in de layout CSS file: Opmaak >> Stylesheets

Code: Select all

div#pagewrapper {
   border: 1px solid black;  <-----------------------------
   margin: 0 auto;       /* this centers wrapper */
   max-width: 80em;   /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;;
   color: black;
}

Groet, Rolf 

[fleur]

Wil  je een bepaalde gekleurde achtergrond achter het plaatje?
wanneer je de kleur toevoegt als background-color,zie hieronder,  dan gaat het volgens mij goed. In onderstaand geval wordt de achtergrond oranje.

div#header h1 a {
/* you can set your own image here */
   
   background: url(uploads/site/header.png) no-repeat 0 0px;
   background-color: #FF8000;
   display: block;
   height: 164px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

groeten
Fleur

[iFocus]

Wil  je een bepaalde gekleurde achtergrond achter het plaatje?
wanneer je de kleur toevoegt als background-color,zie hieronder,  dan gaat het volgens mij goed. In onderstaand geval wordt de achtergrond oranje.

Dat weet ik, maar ik wil juist geen achtergrondkleur, zodat je door de header heen de achtergrond van de site zelf kunt zien, dus transparant zeg maar.

[fleur]

Het is mij eigenlijk niet duidelijk wat de achtergrond van je site moet zijn.
Wanneer in b.v. de backgroung.png plaats als achtergrond (zie onderstaand), dan wordt de gehele achtergrond zwart en is ook de bovenzijde van je header.png transparant=zwart. Maar background.png is een zwart vierkant, dus dat klopt dan wel. Als je een ander achtergrond plaatje maakt dan zou het toch moeten kloppen?

div#header {
   height: 164; /* adjust according your image size */
   background: url(uploads/site/background.png);   
}

div#header h1 a {
/* you can set your own image here */
   background: url(uploads/site/header.png) no-repeat 0 0px;

   display: block;
   height: 164px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

[iFocus]

In de achtergrond van de website zelf heb ik een afbeelding, deze afbeelding wil ik door het transparante deel van de header heen zien (Het licht groene lijntje is de header, waarvan het bovenste stuk transparant is).

Voorbeeld zoals ik het wil hebben:


Afbeelding zoals het nu is:

Maar background.png is een zwart vierkant, dus dat klopt dan wel.

Maar background.png is niet zwart, dat is de achtergrond van de site, uit 2 kleuren donkergroen is die..
(Die background.png word trouwens op de echte site in .gif, maar voor deze testsite heb ik ff alles in png gedaan)


Ik hoop dat het zo wat duidelijker is.

[Jos]

Zou de pagewrapper niet doorzichtig moeten worden?

div#pagewrapper {
   background-color: #fff /*url(uploads/site/Untitled-1.gif)*/;;
}

moet worden:

div#pagewrapper {
   background-color: transparent;
}


update:
hetzelfde geldt voor div#header

[pedes]

html

css

/* ----hoofdinstelling---- */
body { background: url(background_arjan.png) ; text-align: center; font-family: verdana, arial, sans-serif; font-size: 100%; margin-top: 0px; }
a { text-decoration: none; }
li { list-style: none; }

/* ----central container---- */
#wrapper { width: 958px; margin: auto; padding: 0; }

/* ----header---- */
#header { width: 958px; height: 164px; margin: 0; padding: 0; background: url(header_arjan.png) no-repeat; }

Mvg
Peter

[fleur]

div#header {
   height: 164; /* adjust according your image size */
    background: url(uploads/site/background.png)
}

div#header h1 a {
/* you can set your own image here */
   background: url(uploads/site/header.png) no-repeat 0 0px;
   display: block;
   height: 164px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Resultaat:

[iFocus]

Bedankt allemaal voor de reacties, het werkt!

Arjan