PDA

View Full Version : Background size



jewellim
10-25-2006, 02:49 PM
I m creating a background image but dont know the proper size to use. Am using jpg and having tiles effect, i.e repeating background. Any infomation on this is appreciated.

djr33
10-25-2006, 04:03 PM
Hmmm?

There are complex CSS styles and such that would allow, for example, to have a background image resize to fit the size of the page.

But... generally... it's just an image and that's all you need to put in the html.... defaults from there.

If you like as is, then that's fine.

If you don't, then what would you like to fix/achieve?

lainlives
10-25-2006, 06:22 PM
i need a script to strech the bgimage also

jewellim
10-26-2006, 06:47 AM
Problem is i'm not good at css, so probably the template i use has the tile effect which isnt what i want since i am creating my own background image. Stretching or shrinking the image to fit the page will blurr the image yeah? Think i will have to read the basic css page for help.

BLiZZaRD
10-26-2006, 10:50 AM
Just put this in the HTML page, it will tile it and wont distort your image..



<style type="text/css">
body {
background-image: url(path/to/the/image.jpeg);
background-color: red; /* Ought to be as similar to the
predominent colour of the background
image as possible.
*/
}
</style>

jewellim
10-26-2006, 07:58 PM
Oh but i dont want tiled background because the one i use is not suitable for repeated pattern therefore i tot i could use an image that fits closely to the screen size. How abt css to auto adjust the size to fit?

djr33
10-26-2006, 11:34 PM
not sure what the code is myself. Google would find it. Or just wait and see if someone tells you.

However, I should note--
background-color: red;
is wrong... should be:
background-color: #FF0000;

Hexidecimal colors are more valid than just the name. Yes, the name "works"... but isn't the official way. I think it's going to be phased out with the next update to html, but not sure. Just heard that in passing, I think.

jewellim
10-27-2006, 08:26 AM
ok...if someone can identify this problem of mine...there seems to have sorta right margin in the page that any image that span beyond that will be cut off and tile will appear after that invisible margin, Unless i align the image using positioning method. i really hate to do that because i want to use a single image to cover the entire page. Maybe someone whould like to look into my source of the page and see whether any other part of the html causes that margin problem. http://www.freewebs.com/jewellim/ juz in the testing stage so the webpage is still far from completion.

jscheuer1
10-27-2006, 09:03 AM
background: white url(some.jpg) center no-repeat;

dwarfer
10-27-2006, 11:34 AM
Hmmm?

There are complex CSS styles and such that would allow, for example, to have a background image resize to fit the size of the page.



does anyone this complex css? i need a script that would either make a background image fit to any window or show a different image depending on screen resolution. does anyone know if there is such a script?

BLiZZaRD
10-27-2006, 01:12 PM
doesn't the "100%" attribute do this?

something like:



<img src = "somepic.jpg" width= "100%" height= "100%" alt= "" border= "0">


I may well be wrong, I have never used back ground images in this manner so I don't know.

mwinter
10-27-2006, 01:15 PM
There are complex CSS styles and such that would allow, for example, to have a background image resize to fit the size of the page.

I sincerely doubt that. One could fiddle with an img element, but that would be all kinds of nasty.




Oh but i dont want tiled background because the one i use is not suitable for repeated pattern therefore i tot i could use an image that fits closely to the screen size. How abt css to auto adjust the size to fit?

Not possible with current implementations - I suspect that CSS 3 adds the feature, but most of it is still in development.

In any case, browsers tend to resize coarsely producing a poor result.




[For img elements] doesn't the "100%" attribute do this?

Yes, but the image element isn't a background image. Also, see the remark above.

Mike

dwarfer
10-27-2006, 05:15 PM
is there a php script that can do it?

whitefurr
10-27-2006, 06:05 PM
i have a back ground i want on my site it shows the image i want but it doesnt fill the intire page the way i want it it is starting over to the right as if its tiling or somthing i want it so that it will fit any screen perfictly can anyone help me please thank you

jscheuer1
10-27-2006, 06:28 PM
I was kind of hoping in a way to not do this but:

http://home.comcast.net/~ansiguy/alpha_image_test_2.htm

The image must be rather simple and easily scalable, that's the real trick. Mike (mwinter) is correct when he says that this involves all sorts of nastiness and when he says that browsers typically will not resize images very well.

The above demo is from an earlier thread on this topic:

http://www.dynamicdrive.com/forums/showthread.php?t=8515

One known problem is that links on the page may become unusable in certain browsers under certain circumstances. Since it was some time ago that I did this, there may be a way to deal with this. I was unable at that time to discover one that worked to my satisfaction in all target browsers. Also, since in IE a filter is used, it requires javascript enabled.

djr33
10-28-2006, 05:40 AM
Mike, all I know is that I've seen that effect a bunch of times on annoying myspace pages and such.

What John just posted is like that.

No real clue about the coding sides of things.