Images and dynamic layout
I'm working on a website with an em-based layout (so that it can stretch and shrink gracefully when users increase or decrease the font size). This site has a title that should appear on all pages. I have a "header" div on all pages and the whole site css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is it doesn't stretch very gracefully. When the text size is increased, the height and width change, but ** the image does not grow in size; it just repeats *. *
How can I make my image stretch and squishy instead of repeating or cropping? (I would like a CSS based solution to be possible ... I have some html ideas in the store already).
source to share
Can't use css to paint background image. You will need to use javascript or something similar. However, if you have an image that doesn't need to be repeated (for example, blending in the background), you can do something like this:
background-position: center center;
background-repeat: no-repeat;
Appendix: Position has the following format: <top | center | bottom | xpos> <left | center | right | YPos> where xpos and ypos can be given in the usual way (em, px,%, etc.).
source to share
The only way I've ever found it:
- Set background #header to bgcolor of header image.
- Place a new div inside #header
- Divide header image by 2
- Set the left half of the new image as #header background aligned-left
- Set the right half of the new image to be # header.div background aligned-right
Of course, only work with the corresponding images.
source to share
I'm pretty sure you can't rescale background images. If your header.png file was included as a tag img
, you can set its height and width as a number ems
and the browser will resize it (it usually looks like crap though).
Remember that nowadays pretty much all modern browsers do page scaling these days, which will allow you to scale everything without changing your layout too much. Perhaps ask users to use this feature?
source to share
@Pianosaurus, I think your idea might be the simplest, albeit limited one. Just don't stretch the image, but make sure it looks good when it's not stretched (center it and don't let it repeat). Plus, as long as you use enough padding on the edges of your header image, page size down won't cause such big problems either.
source to share