I am trying to make the background always go down to the bottom of the page.

Using css is there a way to make the image have a variable heights.

I would like the bottom of the image to always be about an inch from the bottom of the page once it scrolls all the way to the bottom.

www.drysnot.com and www.drysnot.com/contact.html

see how on the contacts page it doesn't stretch to the bottom?

Whats that called or how do I do it?

Thanks

I think what you are trying to achieve can be accomplished with simple CSS background properties.
You want to make it fixed and use css positioning to place it on bottom of screen.
You could probably use a percentage when positioning the image so it works in different display settings. My favorite site, W3Schools can help you with positioning: http://www.w3schools.com/css/tryit.a...sition_percent

Hope this helps. Good luck.

Not really like for example I have a story that is 1 page long my back ground image would start at the very top of the page and less say have a hight of 1000 px and stop at the bottom of the page.

Then on the other page I have a different story that is 3 pages long. My background image would start at the very top of the page and less say have a hight of 3000px and stop at the bottom of the page

on this forum its the same image www.drysnot.com/forums if I have 1 form the image is small if I add 30 forums the background image will get taller on its own to span from the top to the bottom of the page no matter if the distance changes.

I think what you want to do is have the image you want to use as the background first, then put in a background color to the page that matches the bottom of the image/gradient. Your body css code would look like:

background-image: url('images/bg.gif');
background-color: #5A5A5A;
background-repeat: repeat-x;

Matt

Once you had your background sorted could you just not add a margin?

Originally Posted by CubicalPhil

Once you had your background sorted could you just not add a margin?

That will start the entire page down lower. I think he just wants to start the background lower? I am not sure though, haha... a bit confused myself.

Matt

Its hard to explain

I guess have more than one background image a top two sides and a bottom

The two sides would tile the page I guess.

Do you see what I have done wrong? I am not getting any of the images to show up.

Thanks

body {
    font-family: "Times New Roman", Times, serif;
    background-color: #282828;
    color: #CCCCCC;
    background-image: url(/public_html/drysnot/assets/myimages/middlebg.jpg);
    background-repeat: repeat;
    background-position: center center;
}
.headbg {
    background-image: url(/public_html/drysnot/assets/myimages/topbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
.footerbg {
    background-image: url(../myimages/bottombg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
}

/public_html/drysnot/assets/myimages/topbg.jpg

Is NOT a URL. It is a physical path on the server

your images are located at

/assets/myimages/filename.ext

Ok I think I got that but I found out there is some kind of class thing that needs to tie my headbg and footerbg file to my html or something.

Any idea what thats about or how I do it?

Thanks

body {
    font-family: "Times New Roman", Times, serif;
    background-color: #282828;
    color: #CCCCCC;
    background-image: url(../myimages/middlebg.jpg);
    background-repeat: repeat-y;
    background-position: center center;
}
.headbg {
    background-image: url(../myimages/topbg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
.footerbg {
    background-image: url(../myimages/bottombg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
}

GET RID OF THE ../ syntax and use root relative URLs for a start.

but I found out there is some kind of class thing that needs to tie my headbg and footerbg file to my html or something.

is this what you mean?

<div | span | p | any_other_container_element class="class_name">content</element>

I got it you can see what I mean if you go to my site

www.drysnot.com

Once there click on contacts and you will see how the image stretches.



What do you mean about the syntax?