How do I do this?

Ok I'm going to test all you graphics people. I have a dilemma and I need an answer.

I have an image that's not part of the background nor part of the header, that I want to tuck up in the upper left-hand corner of the style. It's a flower and I want it to look like it's blooming out of the corner, for lack of a better explanation.

How would I do that? What code would I use? Or is there another way?

Thanks in advance for your help! :D

You could add it to the background of the page using css - top left, no repeat - the css is thus:
body, html {background: #000000 url(path/to/image.gif) no-repeat left top;}
You can add it to the overall style sheet, but it depends on the style your using. I'm not sure if you want it on top of all the content? If it's within a table, like within the header template, you could set it as a cell background in the css and use the no repeat thing.

The one above assumes you're using a solid background - you can change that in the code hex value or delete it. Hope that helps a bit? There's probably a better way to do it. :)

and set the margins and spacers

thanks guys, but I'm still confused.

I am using a solid white background yes. Where in the css would I place the code? I thought it was going to go into perhaps the code header template or something like that, because I want the image way up in the corner of the screen, not just the corner of the header.

yes in the header template you add the html of the image

I guess I should specify also that the image is separate from the header. Does that make a difference?

semann......... ok I put the code in the header template. But where in the header template and what code?

I want the image tucked up in the left hand corner of the screen... separate from the header/logo. SO I guess it would be image then logo

depneds on where you want it to show up

Logo
pic

pic Logo

pic
Logo

logo pic

Where pic is the pic in question

Then you put it before or afte <---logo--->

or you can add it as the background for the style i think.......

so your body background would be something along the lines of:

#ffffff url(images/filename.jpg) no-repeat top left fixed

(adjusting file name and location to suit of course :))

no I don't want it to be part of the background. I have a separate background.
but thanks

could it not be built in to the background then? or am i misunderstanding what you're after?

Ok - go into the style manager, choose Main CSS from the options, and the very top box should be Body (Customized in this Style) - add Elsie's line of CSS to the Extra CSS Attributes box and make sure the image is in the right place. This should then give you the solid white background plus the image top left corner of the page. :)

thanks Dio... unfortunately grrrrrrrrrrrrrrrr, no good. The entire forum covers it :(
see? http://www.vbimpressions.com/forums/index.php?styleid=9

I think I may have to put it in the header after all and make the header stretch all the way across the screen

the only flower i can see there is the small one next to the logo (at the end of the word "impressions").

nice style tho btw :)

thanks :D


I forgot I didn't have the other one turned on... now it is
http://www.vbimpressions.com/forums/index.php?styleid=9

I guess I'm going to have to greatly reduce it in size and make it part of the header :(

if you positioned the site content to the right, would that help? you'd probably have to make it slimmer too tho.

OOooookay, now I see what are you trying to achieve... maybe it would work if you try to make the tables translucid/transparent appliying the following properties in your tables background CSS:

filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;

Change the part in red to whatever percentage level of transparency you want. You need the three properties so it works on most browsers.

OOooookay, now I see what are you trying to achieve... maybe it would work if you try to make the tables translucid/transparent appliying the following properties in your tables background CSS:

filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;

Change the part in red to whatever percentage level of transparency you want. You need the three properties so it works on most browsers.

Oh KEWL!! Where would I do this at? In the css? if so, where in the css?

I haven't actually used this ones in vBulletin yet but I would try in the <td>, <th>, <p>, <li>, Category Strips, Table Header, Table Footer, First Alternating Color and Second Alternating Color sections. Use the Extra CSS attributes boxes.

well then let me be the first, lol. thank you! I'll let y'all know if it works

ooooooooook... this would work except for the fact that if you try to make the page background transparent, everything else disappears right along with it.

I have every other area set to 80, and page background set to 20 as it right now.
http://www.vbimpressions.com/forums/index.php?styleid=9

seems that the page background area affects everything. grrrrrrrrrrrrr...


ok you coders... code something up for me to make that page background disappear but NOT the forums!


Think of this as a challenge............... http://www.exquisitelyerotic.net/forums/images/smilies/frog.gif

I think there is some inheritance at work there, since page background is on a higher "branch" that's why I didn't mentioned it on the list of places to try the CSS opacity. Try removing the css of the opacity from the page background and in the color part of it leave it at transparent

I think there is some inheritance at work there, since page background is on a higher "branch" that's why I didn't mentioned it on the list of places to try the CSS opacity. Try removing the css of the opacity from the page background and in the color part of it leave it at transparent


I LOVE YOU!!!! :D

After I did that, the forum body was still over the image, so I got bright (bout time) and made the header tall enough to drive the forums down below the image!

thank you SO much for your help on this darlin!

Glad it worked, now I'll have something to play with on the next few days >) (css opacity that is :p)

Glad it worked, now I'll have something to play with on the next few days >) (css opacity that is :p)
lol...you're cute.

about that... I removed the opacity from the other settings. It fades everything, including the text.

Yeah later I tought it more calmly and with the CSS editor open to play with... try puting it at the end of the background fields of the controls you want translucid, you know, like the list I gave you in my earlier post... I just did it with a textured image in a test style and it gives a very nice effect... I'm playing more with it <insert sound="evil_laugh.wav" /> ;)

ahha, put the code in the background line of those areas? I'll go try that.

peg, can you link to it so we can see the effects? :) the link in post #21 goes to the wrong style.

peg, can you link to it so we can see the effects? :) the link in post #21 goes to the wrong style.

sure, I'll keep this one on, since we're playing with different effects.
http://www.vbimpressions.com/forums/index.php?styleid=9


I tried the opacity in the background lines like Hell said to, but the result I got was everything turning a dark purple, so I quick took them out, lol.

i really like the colors and font of the logo at the top :) not too sure about the dark blue strips tho. i'm guessing it's still very much a w.i.p. anyway.

(btw, you could take the "fixed" bit out of the background stuff if you didn't want the tulip to stay behind the tables when scrolling..... i think..... but i'm sure you already knew that! :))