Need styler or coder help, not sure which... [Archive]

Ohiosweetheart

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

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:

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

In the Additional CSS Definitions in Main CSS add:

#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:

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

In the Additional CSS Definitions in Main CSS add:

#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

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

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:

#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

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:

#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

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:

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

07-31-2006, 10:22 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:

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?

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 :confused:

Freesteyelz

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. :D

Ohiosweetheart

07-31-2006, 03:26 PM

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. :D

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

07-31-2006, 10:47 PM

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