NewbulusMaximus
Programmer
I need to stretch (height and width) a background image for any screen resolution but have been unsuccessful. I can do it for a html img, but can't get it to work for a css. What do I have to do?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
CSS - Stretching Backgroung Image??
- Thread starter NewbulusMaximus
- Start date
- Status
How are you stretching it with HTML?? As far as I know, there is no way to actually 'stretch' (as in reproportion) an image that is set as a background.
However, depending on the content of the image you are using, it may be appropriate to tile it -- that is, cause it to repeat itself over and over until it fills the entire space. This effect can be acheived using the CSS property/value pair, "background-repeat:repeat;".
You can also make the picture center itself in the available space, allowing your background-color to show in the areas it does not cover. In this case, use these two statements: "background-repeat:no-repeat;" and "background-position:center;". If you are using the picture as the background of the entire page (not just in a small box), you might want to also add this code - "background-attachment:fixed;" This will make sure that the picture doesn't scroll away if the user needs to scroll the page to see all of it's content.
Let me know if this helps! -----------------------
"It's lonely at the top, but you eat better." -- Unknown
However, depending on the content of the image you are using, it may be appropriate to tile it -- that is, cause it to repeat itself over and over until it fills the entire space. This effect can be acheived using the CSS property/value pair, "background-repeat:repeat;".
You can also make the picture center itself in the available space, allowing your background-color to show in the areas it does not cover. In this case, use these two statements: "background-repeat:no-repeat;" and "background-position:center;". If you are using the picture as the background of the entire page (not just in a small box), you might want to also add this code - "background-attachment:fixed;" This will make sure that the picture doesn't scroll away if the user needs to scroll the page to see all of it's content.
Let me know if this helps! -----------------------
"It's lonely at the top, but you eat better." -- Unknown
Guest_imported
New member
- Jan 1, 1970
- 0
i've heard there is a workaround for that using divs...
the background image (in a simple image tag) in a 100% X 100% div and the rest of the document in another div, on top of the 1st one.
have fun
the background image (in a simple image tag) in a 100% X 100% div and the rest of the document in another div, on top of the 1st one.
have fun
If you're talking about background image, there's no need to stretch it according screen resolution.
Create a very wide image (much wider than any real resolutions) and place it in table cell with %-specified width. This will create a feel that the image is adapted for specific resolution and fills entire screen.
This technique is widely-spread, look at professional sites with fluid design and you'll find a lot of examples.
Create a very wide image (much wider than any real resolutions) and place it in table cell with %-specified width. This will create a feel that the image is adapted for specific resolution and fills entire screen.
This technique is widely-spread, look at professional sites with fluid design and you'll find a lot of examples.
- Status
Similar threads
- Locked
- Question