Click to See Complete Forum and Search --> : resize background image
Adrian Girling
11-15-2003, 12:08 PM
I'd like to be able to resize the background image so that it just fits in the user's screen width once, instead of tiling.
The bottom of the image fades into a single color, so I'd really like the image only at the top of the page, with the aspect ratio maiantained, and the single color background filling the rest of the page to the bottom.
I feel sure this must be a common requirement which has been done before. It will take me ages to figure it out, so if anyone knows how, or can point me at an example, I would be most grateful.
Thanks, Adrian
<body style="background: url('your_image.gif') white repeat-x;">
[J]ona
Adrian Girling
11-15-2003, 02:31 PM
Thank you for the reply Jona.
I must confess I don't fully understand this script, and I was so excited that the solution might have been so simple!
I cut and pasted it, put the image url between the single quotes, but it tiles the image across the screen width, and puts white all the way down under the top row of tiled images.
So this script satisfies my objective of putting colour below the picture, but still leaves me with multiple images across the page.
Is there any way to get the image to change size, e.g. width, but maintaining aspect ratio, to exactly fit the size of the screen with just one image, maintaining the aspect ratio?
Thanks again,
Adrian
<body style="background: url('your_image.gif') white no-repeat center center;">
[J]ona
Adrian Girling
11-15-2003, 05:18 PM
This is great, I can see what the script is doing. To move the image to the top I changed the second 'center' to 'top' and it moved the image to the top (maybe it works if I leave out the second center, I didn't try that)
I'm probably not explaining very well what I'm trying to do.
The image I am using is a picture of the London skyline with Big Ben, Houses of Pariament etc silhouetted against the sky. The buildings are dark, the sky is light. I am trying to get the picture to fill the screen, left to right, whilst maintaining the aspect ratio, filling in the bottom of the screen with palin colour matching the bottom of the image.
I believe the users's screen size data must exist in the document object, but I have no idea if it is possible to extract this 'onload' and modify the picture size to suit it, all within the <body> tag.
It may not be possible, but since you clearly have a good knowledge of the intricacies I'd very much appreciate your view.
Thank you again, Adrian
Originally posted by Adrian Girling
This is great, I can see what the script is doing.
It is not a script, it is simple CSS2 (http://www.w3.org/TR/CSS2/).
As for your question, no, I do not fully understand. Is the image to repeat at all? If so, you may add repeat-y or repeat-x otherwise use no-repeat. If you want it to be centered at the top, center top will work; the properties are: center, left, top, right, bottom for each position possible (a total of two).
[J]ona
Adrian Girling
11-15-2003, 05:39 PM
Thanks for the info re CSS2. I have bookmarked that page and will explore further.
I can see how to repeat or not repeat, and to move the image up and down now.
I only want one image. I'd like if possible for it to change size automatically so that it spans from left to right in the screen, and for it to maintain its aspect ratio, whatever the user's screen size happens to be.
Thanks so much for your patience with me!
Adrian
timgilbert
11-15-2003, 10:39 PM
I have once seen a web site whose entire web page gets smaller and larger as you resize your window; not to be confused with the way tables expand and collapse as the page size varies. Everything from the text to the pictures grow and shrink as you resize the page - and utilizing something of a similar nature would yield to your picture being the same size as the viewers browser window as they enter your site. This may be what you are searching for - however if I remember right, it was done while using SWF. This may provide you with some ideas if nothing else.
The web site is: www.zipperfish.com
It is a (reasonably clean) online men's magazine.
Hope this helps.:cool:
Keeping in mind that not all users have JavaScripting enabled, it is best to use whatever technology is available. Thus, the use of CSS. (My mistake on my previous posts, the code used was introduced in CSS 1.)
I have a limited vocabulary for my age (fourteen), could you explain to me what you are meaning by, "aspect ratio," please?
[J]ona
Adrian Girling
11-16-2003, 03:52 AM
Thank you, timgilbert, for the link. Clever isn't it. The site appears to use Macromedia Flash 7 which is a whole new area of mystery for me. I wonder if a subscriptiion to the site would be tax deductible as a training expense?
Hi Jona, I agree exactly with your point about using CSS instead of Javascript if possible.
When you asked me the meaning of aspect ratio I wondered if maybe I'd made up the expression myself, but I checked my Paint Shop Pro S/W and they use it too!
All it means is that, if you double the width of an image the height doubles too, so it mainains its shape. So I don't want the image to resize width and height with different ratios, I want the width of the screen to determine the image size. The raw image is about 500 pixels wide and 100 pixels high, so unless the user's screen is a really funny shape there will be space below the picture which I will fill with a single colour background.
Once again, thank you for your help on this.
Adrian
So you want a different image to appear each time or completely resize the image itself? You cannot resize the background image, so you would have to use an image in a DIV tag and stretch the size of the image via JavaScript depending on the resolution. (Not recommended, but would work as long as the normal image is sized for a resolution of 400x600.)
[J]ona
Adrian Girling
11-16-2003, 06:23 PM
I guess it would be ok to have a number of versions of the same image at different sizes and to pick the one which is the nearest fit, but it would be more elegant to change the image size.
I'd be grateful for a little further clarification of the method you are suggesting.
Thanks again,
Adrian
<div style="width:100%; position:absolute; left:0px; top:0px; text-align:center;">
<img src="your_image.gif" style="width:50%; height:10%;">
</div>
[J]ona
agminer
11-16-2003, 10:27 PM
I see a problem with loss of image quality as you enlarge the background image or it will be a huge file that takes an awful long time to load.
Adrian Girling
11-17-2003, 05:21 AM
Thanks Jona, this works just fine. It would have been perfect if it could have been a background image, as putting text over it is now slightly more complex, but it gets the job done so I am not complaining! Thank you aagin, you have saved me lots of time.
I fact, I put a '*' instead of the 10% for height, as this maintains the aspect ratio (sorry to harp on about it) as opposed to filling a percentage of the screen, otherwise the image distorts depending on the screen height/width ratio.
Yes, agminer, you are right. The whole thing is a compromise between speed and resolution. The image I am using has limited colour and contrast so it doesn't dominate the text over the top of it, and this lends itself to good jpg compression. It becomes a bit 'pixely' but I am pretending this is all part if the artistic effect!
Adrian
Glad I could help... And you didn't even have to use JavaScript. :)
[J]ona