Home » Post Item » Adding Background Images to Boxes
Adding Background Images to Boxes
July 12, 2008Change YOUR IMAGE URL with your own image URLS and change HEX VALUE with your appropriate colors
/* CONTROL PANEL: BOX */
Code:
.controlpanel { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no repeat’; }.controlpanel { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no repeat’; }
Copy AllRevert Changes
/* BOX: MORE ABOUT ME */
Code:
.moreabout { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no repeat’; }.moreabout { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no repeat’; }
Copy AllRevert Changes
/* BOX: MY PHOTO GALLERY */
Code:
.photos { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.photos { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY FRIENDS */
Code:
.friends { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.friends { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY GROUPS */
Code:
.groups { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.groups { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY TESTIMONIALS */
Code:
.testimonials { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.testimonials { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY PUBLICCOMMENTS */
Code:
.publiccomments { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.publiccomments { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY SCRAPBOOK */
Code:
.scrapbook { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.scrapbook { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
Code:
/* BOX: FAN OF */ .fanof { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }/* BOX: FAN OF */ .fanof { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY FANS */
Code:
.myfans { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.myfans { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY REVIEWS */
Code:
.reviews { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.reviews { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* BOX: MY BLOGS */
Code:
.blogs { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }.blogs { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
/* CUSTOMIZED MEETTRAILBOX */
Code:
#meettrail { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }#meettrail { border-width: ‘any value from 1 to 10′px; border-color: #HEX VALUE; border-style: ’solid, dashed, groove, etc…’; background-color: transparent; background-image: url(YOUR IMAGE URL); background-position: center; background-repeat: ‘repeat or no-repeat’; }
Copy AllRevert Changes
Don’t forget to add the codes in your CSS extension file..
Add a comment
▀ bLinX ▀
wHaTz d` laTeSt??
.: bLuRt iT oUt! :.
- Miguel Guedes de Sousa:
Wow, thanks for the tip. This is one of the most useful I’ve found online.
- sia:
but what should i put in between? hope you can help…thanks
- sia:
Can I ask something?
Coz am working on my overlay, but Im stuck in putting codes to spawn the contents of friendster boxes like about me, comments, my friends, my media etc.. I start with like- sia:
salamat pareh>>>
- sia:
salamat pareh>>>
- Patrick:
thanks po ah.. sana mapagana ko…
- blueblinx:
Hi guyz!^^,
Welcum 2 mY pAgE..Enjoy!:)
◘ cLicK iiR..
Latest Comments
- blueblinx: thanks!:)...
- Basic Html: Wow! This blog is relevant to Basic Html that one has to take full advantage of learning this process because it helps to increase the productivity of the business....
- sia: Can I ask something? Coz am working on my overlay, but Im stuck in putting codes to spawn the contents of friendster boxes like about me, comments, my friends, my media...
- Jorge mamon: Hello Aptech...
- elizer: Jorge mamon say Hello Aptech...
◄ CREDITS ►
