Jump to content

stretching a bg image


JCastro

Recommended Posts

First off, i searched and didnt find similar questions being asked.What i want, is to stretch a bg image in a table. Not through the whole table just one cell.Ive found the css codes to do background images but i havnt found if there is a way to do this? What i want is a gradient image to stretch the the height of the cell, that way i dont have to make a new bg for every table that has content in it. is this even possible?

Link to comment
Share on other sites

can u tell for wha purposs u need it, so that i can give better suggestion.

i have a table set up, inside i have text for my webpagei want to re ruse this table for multiplage pages and have the main text content inside of itand i want each table to have a gradient background, even though each table is a differeent length because of the amount of text....i hope to sometime set up a blog/news software that will use this table, and depending on the length of the text inside the main area, i want the bg image to stretch?to understand what table i mean, go to http://www.webjdc.net check that main ta ble with all the text... right now its a blue background but i want to put a gradient one in.if you go to like, the services page it used that same table, but its a different height..
Link to comment
Share on other sites

if you have this HTML

<table cellpadding="0" cellspacing="0" style="width:750px"><tr><td style="width:250px">...some content...</td><td class="bgImg" style="width:500px">...some more content...</td></tr></table>

this CSS

.bgImg{   background-image:url(yourimage.gif);   background-repeat: repeat-y;}

Providing yourimage.gif is at least 500px wide (the width of the cell) then this will tile vertically to fill the height of the cell.Note: I said tile not stretch...you cannot stretch a bg image but if you make it so it will tile nicely that is a good option.

Link to comment
Share on other sites

in the CSS place a (.) before bgImg ---> .bgImgand sometimes td will not load background images if not inline code, if it still doesn't load try this<td style="background-image:url(gbg.jpg);background-repeat: repeat-y">

Link to comment
Share on other sites

Allright thanks i got what you said to work.now i have an idea of what you said but i am not sure if this solves my problems....originaly i wanted the bg image to stretch to the height of the cell, but you said it is impossible.so you suggested tileing....im not sure why?I have the gradient going from the top to the bottum, but if it tiles on the y, then it repeats itself? so i will see this start over again....hmmmm.

Link to comment
Share on other sites

ok the best I can suggest is this...Lets say the gradient image you have is 500px in height. It is black on the top and fades to white at the bottom.Your cell is 750px in height so you need to give the illusion of continuity. I would do this

<td style="background-image:url(gbg.jpg);background-color:#fff;background-repeat:repeat-x">

In doing this any extra height over 500px will be white so it looks like the image is continuing. it will tile horizontally to fill the width of the cell or if the image is the correct width already you can change repeat-x to no-repeat.That is the best solution I can suggest.

Link to comment
Share on other sites

thank you so much, i have decied thats the way its gonna have to be.i guess for the main areas of my webpage get a few different sized gradient images and do it for each table, then when i implement my blog into the same format... just make sure i write a lot.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...