Getting a general gradient image to fit a browser screen when used as a background.

EW
Posted By
Eliot_Wasmund
Jul 14, 2004
Views
273
Replies
2
Status
Closed
Hi. Any help woudl really be appreciated. This is what I’ve done: I opened up a new layer, making it 800X600 pixels so that it should fit the basic browser screen. I cover that layer with a gradient that I would like for the background of a website. I save it as a jpeg and place it in my website’s files. Since I want it to be the background, I put something like this in my code: . When I open up the final result, the picture covers most of the screen, however, on the right side of the screen, about two inches from the end, the picture starts all over again, so there is a big line running down the screen. My question is: how do I get something so simple to just fit the entire screen? Thank you.
Related Tags
background browse fit gradient image screen use

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

ML
Mark_Levesque
Jul 14, 2004
The default rendering is for your background image to be repeated (tiled, usually) unless you specify otherwise, preferably through a cascadable style sheet (css) directive. You have several options. You can make the background gradient larger than 800×600 so it doesn’t tile (a bad choice because it extends downloading times). You can use a css directive to tell the browser not to tile the image (good choice). Depending on the way you make your gradient, you may be able to make the image file much smaller by reducing the size of the image and controlling how it is repeated. For example, on one of the pages I designed, I used a vertical gradient that was only 72 px wide and 144 px tall, but I allowed it to tile horizontally. This gave me a nice gradient all along the top of the page, ~2" tall that extended the entire width of the window. The file was really tiny in size, too. Something to consider.

Mark
GD
Grant_Dixon
Jul 14, 2004
Eliot

Well not seeing what code you are using I will just assume it is HTML. The short answered is you can’t resize the background using standard HTML or Styles. To do this you will need to do some fancy manipulation using something like JavaScript plus styles or another program such as Macromedia flash. Be warned that these workarounds will only show up on browsers that can take advantage of these features.

There are some work arounds in standard HTML and if you want to know how to do that send me an email of a copy of the file you want to use. Be aware the work arounds are rather crude.

Grant

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections