FRIHOSTFORUMSFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

2 Background images, picture borders, transpaernt backgounds

 


m-productions
Ok, lets start with the easier and more important problem. I need a way two fix the problem I have... I know you cant have 2 background images... but how would you go about fixing something like this, I have the following.

Code:

.journalbox .journaltext .flash {
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
color: #------ !important;
text-align: right !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #ffffff !important;
background-color: #------ !important;
width: auto !important;
background-image: url(http://i197.photobucket.com/albums/aa36/m-productions/OverallFlash.jpg);
    background-position: top left;
    background-repeat: no-repeat;
}

as you can see here. http://m-productions.deviantart.com/ it looks very nice (its the little title bar) anyway... now look at it here. http://m-productions.deviantart.com/journal/14863906/#comments
as you can see, the image is one image, what I need to do, is make the picture on the left its own image, and the gradiant background, a repeating background image, how would I add it so that image dispalays on the left within the css? and if you cant...whats a solution.



2nd question. This ones more complex. I know Ill need the images... but I dont know how to go about setting up the divs to do this...for example. if you take a look at this picture http://etype2.deviantart.com/art/Visions-CSS-1-59453851 you will see how the tables there have custom borders... how woudl you go about setting such a thing up?


3rd question. transparent backgrounds...example here. http://s0rd3n.deviantart.com/art/dA-Journal-CSS-56975344


I am more than willing to hand out frih for this help. and please, dont just give answers... i wish to learn as well.
mathiaus
1. Add another div inside
Code:
<div style="gradient background repeat">
<div style="transparent background, background image on the left no-repeat height & width 100%">Game Updates</div>
</div>



2. The way i would do it is by adding 2 divs, one either side
Code:
.border { background image repeat-y left ; padding-left 50px}
.middle {  background image repeat-y right; padding-right 50px [example]}

<div class="container">
<div class="header>Title</div>
<div class="middle"><div class="border"><div class="content">Content</div></div</div>
<div class="footer"></div>
</div>



3. background: transparent url(./bg.gif') repeat;
Make the image in photoshop or Gimp etc. Start with a transparent image, for colour, add a brush etc with a 50% transparency for example. Save in a format that saves transparency (PNG does but IE6 won't use it as transparent)
m-productions
Wonderfull good sir!! Ill give these guys a try, and report back with the bugs (that I know I will have... im just to new not to have them)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.