Page 1 of 1
[Opgelost] Doorzichtige header mbv png
Posted: Mon Mar 02, 2009 7:14 pm
by 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
Re: Doorzichtige header mbv png
Posted: Mon Mar 02, 2009 7:19 pm
by 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
Re: Doorzichtige header mbv png
Posted: Tue Mar 03, 2009 3:28 pm
by 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?
Re: Doorzichtige header mbv png
Posted: Tue Mar 03, 2009 6:49 pm
by 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
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 1:52 pm
by 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
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 3:43 pm
by 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
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 4:37 pm
by iFocus
fleur wrote:
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.
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 8:24 pm
by 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 */
}
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 9:47 pm
by 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.
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 10:13 pm
by 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
Re: Doorzichtige header mbv png
Posted: Wed Mar 04, 2009 10:44 pm
by 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
Re: Doorzichtige header mbv png
Posted: Sat Mar 07, 2009 3:49 pm
by 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:
Re: Doorzichtige header mbv png
Posted: Sun Mar 08, 2009 1:58 pm
by iFocus
Bedankt allemaal voor de reacties, het werkt!
Arjan