The Arcive of Official vBulletin Modifications Site.

Ohiosweetheart · #1 07-29-2006, 10:48 PM

I'm new at styling, and I'm making a new style and I have two images that I want to use.

The first one will go at the top, and stretch the entire width of my forum, to the very edges of the screen, not just the forum.
The other image, I want to go at the bottom of the forum, from left side of screen to right. Not in the footer, I'm talking at the very bottom.

Doing it via the main css in the style isn't working. So I'm assuming I will have to somehow code these into the forum display template?

If so, please help me out? As in, what code would I use, and where would I place it?

Thanks in advance for any help

Freesteyelz · #2 07-30-2006, 12:02 PM

You can use the Main CSS but you'll also need to edit the Header and Footer templates. At the very top of your header add this:

Code:

<div id="topimg"></div>

In the Additional CSS Definitions in Main CSS add:

Code:

#topimg {
  width:100%;
  height:30px;
  margin:0;
  padding:0;
  background:#000000 url(/forum/path_to_image_here/) repeat-x top left;
  }

Change the values of "height" and "background". The height value should be the exact height of the image.

That covers your stretched image at the top. As for the bottom I'm not sure what you mean by "Not in the footer, I'm talking at the very bottom." Since the image will be at the bottom the code will need to be in the Footer template. In any case at the bottom of the Footer template add:

Code:

<div id="bottomimg"></div>

In the Additional CSS Definitions in Main CSS add:

Code:

#bottomimg {
  width:100%;
  height:30px;
  margin:0;
  padding:0;
  background:#000000 url(/forum/path_to_image_here/) repeat-x top left;
  }

Same as you did with the top image values, change the "height" and "background" values.

I hope this helps. If you need further help just give me a holler.

Edited: I just thought about the bottom image. In the case you want an image that will be positioned at the bottom of the page (stuck) regardless where the footer is on the page then you'll need to use an "absolute" position defined by CSS. If this is what you want let me know and I can help you with the code.

Ohiosweetheart · #3 07-30-2006, 12:32 PM

THANK YOU for all of this!! I have to go to work now, but will do all of this when I get home this afternoon.

As for the footer, yes, what you added is what I want. I want the bottom image to be "stuck" at the very bottom of the page, no matter where the footer is.

Thank you so much!

Freesteyelz · #4 07-30-2006, 12:44 PM

NP. Try the above Footer code first. If that isn't what you had in mind then replace the Footer CSS with:

Code:

#bottomimg {
  position:absolute;
  bottom:0px;
  left:0px;
  width:100%;
  height:30px;
  margin:0;
  padding:0;
  background:#000000 url(/forum/path_to_image_here/) repeat-x top left;
  }

Ohiosweetheart · #5 07-31-2006, 12:46 AM

Ok neither of these is doing what I want to do. the bottom image is scrolling along with the forums and all of the footer information is above the bottom image, rather than on top of it.

I need for this bottom image to be part of the background, so that the footer info scrolls over it.

The top image, I wasn't able to get it to work using the code you supplied above. So what I did was place it in the body background line as so:

Quote:

#EFE4EC url(images/bfly/topimg.gif) no-repeat top left fixed

is there a way to do this with the bottom image? make it part of the background like the top image is?
Here's a link to my forum and the style I'm talking about.

http://www.vbimpressions.com/forums/?styleid=10

Freesteyelz · #6 07-31-2006, 04:51 AM

OK...I now see what you're trying to do.

To have a fixed background image placed at the bottom change the background image values to:

Code:

background:#efe43c url(images/bfly/topimg.gif) no-repeat bottom left fixed;

This image will now show up at the bottom left-hand corner and it won't be repeated. The code will be applied to the <body> tag. If you want it to repeat then use either "repeat", "repeat-x" or "repeat-y".

----------

Is it my understanding that you want 2 background images (one at the top; one at the bottom), both fixed? Or just the bottom image?

Ohiosweetheart · #7 07-31-2006, 10:22 AM

Quote:

Originally Posted by Freesteyelz

OK...I now see what you're trying to do.

To have a fixed background image placed at the bottom change the background image values to:

Code:

background:#efe43c url(images/bfly/topimg.gif) no-repeat bottom left fixed;

This image will now show up at the bottom left-hand corner and it won't be repeated. The code will be applied to the <body> tag. If you want it to repeat then use either "repeat", "repeat-x" or "repeat-y".

aww geeze, I'm sorry that the link above didn't work. I didn't have the style turned on, but it is now.
How can I do this tho, with the top image already in the body background line, and fixed? Do I add it after the top image info in the body background line?

Quote:

Originally Posted by Freesteyelz

Is it my understanding that you want 2 background images (one at the top; one at the bottom), both fixed? Or just the bottom image?

EXACTLY! two backgound images, one at the top, one at the bottom, both fixed. Right now, the bottom image is scrolling and not part of the background. (I fixed the link if you wanna look)
Please forgive me for not having been clear on that. I'm not good at explaining what I'm after

Freesteyelz · #8 07-31-2006, 10:52 AM

Unfortunately, as far as I'm aware multiple (layering) of background-fixed images in the body tag is not supported (for most browsers), yet. We'll have to wait for CSS 3 and then browsers to support it before we see the so-often requested feature.

I'm constantly running CSS experiments so if I come across something I'll let you know.

*There may be a Javascript solution; Frames can do it but I don't suggest doing that.

**Yeah, I didn't want to say anything about the link.

Ohiosweetheart · #9 07-31-2006, 03:26 PM

Quote:

Originally Posted by Freesteyelz

Unfortunately, as far as I'm aware multiple (layering) of background-fixed images in the body tag is not supported (for most browsers), yet. We'll have to wait for CSS 3 and then browsers to support it before we see the so-often requested feature.

I'm constantly running CSS experiments so if I come across something I'll let you know.

*There may be a Javascript solution; Frames can do it but I don't suggest doing that.

**Yeah, I didn't want to say anything about the link.

Ok, so since the bottom image is alot more detailed than the top anyway, I'd rather use it then. So do I use the code that you gave above for the bottom image, in the body background line in main css?

I'll try that... thank you again for your patience and help *big hug*

Freesteyelz · #10 07-31-2006, 10:47 PM

NP. I tested it the code so it should work. If not just holler back.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04438 seconds Memory Usage 2,261KB Queries Executed 13 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (7)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!