We help IT Professionals succeed at work.

changing a background image size

tmonteit
tmonteit asked
on
The following won't change the size of my background image.  No matter what dimensions I put in for height and width I can't get it to size correctly?   What is the correct way to do this?


Also, the image seems to wrap and repeat.  I just want to see the image once.   Is that a setting?

<body background="images/background.jpg" bgcolor="#000000" vlink="#808080" bgproperties="FIXED" text="#C0C0C0" link="#FF0000" alink="#0000FF" width="800" height="600">
Comment
Watch Question

Background images cannot (easily) be scaled. You can accomplish it through some CSS and javascript trickery. You definitely cannot do it by using plain HTML attributes.

Here's some details on a some ways to accomplish it:

http://css-tricks.com/3458-perfect-full-page-background-image/

If your image does not need to dynamically scale in size, you will have a much easier time just using a graphic editing program to scale the image beforehand to the correct size instead.

Tiling is an easy thing to control, thought - again by using CSS instead of HTML attributes. Use the background-image CSS attribute along with the background-repeat CSS attribute to control the background image and its tiling.

See this tutorial:

http://www.w3schools.com/css/css_background.asp

Commented:

Hello tmonteit,

I have one HTML document but wait a several minutes to find it.

N.
Commented:


Well, here it is - it works for IE 6, 7 and 8 and Firefox 8 and 9.

Download attachment.


bg.html

Background 800x600

with my best regards

Nrisimha

Author

Commented:
Is there a way to make it dynamically size based on the persons browser window size?  example some browsers are set to show more pixels than others.  I want to show the whole image regardless.
Commented:

OK, I have a 17" monitor with graphic card set to resolution 1024x768.

I set a values to be 100% for width and height in HTML document and this image that has dimensions 800x600 is dynamically stretched over all my screen of the monitor  !!!
It is because I wrote in the HTML page that I set 100% stretching ! It means - over all screen !!

Did you open my bg.jpg image and look at that and maybe you have noticed that it has only 800x600 pixels? Probably not, because you ask me this question although you don't talk about how are you watching this background in IE and Firefox?

I have 100% stretched size of this image from 800x600 pixels and under browser it is stretched to full screen.
What does it mean? It mean that image with dimensions 800x600 pixels is stretched under the browser to 100% size of the screen resolution and it means that this smaller image is stretched to
1024x768 pixels when I view this under IE, Firefox and Safari, because of graphic card settings where I choose maximum resolution for screen to be 1024x768.

I hope that now it is clear. If you have a some question you can ask me.


with my best regards

Nrisimha