novice, please help - Graphic Design Forums: UK forums for graphic designers

rgnau81 · 11-04-2009, 09:22 AM

Hi hope someone can help, I am new to web design and html but I have created an image in photoshop
and would like it to be my background image on my home page but when I put the html code that I think is
correct the image falls short of filling the browser window and is aligned to the top left corner??

here is the code I am using

<html>
<head>
<style type="text/css">
body
{
background-image:url('pic.psd');
background-repeat:no-repeat;
}
</style>
</head>

</html>

Arhiann · 11-04-2009, 10:34 AM

Quote:

Originally Posted by rgnau81

background-image:url('pic.psd');

This is likely part if not all of the problem, you really need to RTM.

You can do it with PhpHP I believe, but I would think that's beyond you for a while at least:

Let me google that for you

JMCDesigner · 11-06-2009, 05:24 PM

say your image is for example 200x200 pixels. if your browser is 800x600 your background image wont stretch to that size. However if you want your image to to fill the page by repeating in your background, remove the 'no-repeat' style. Also like Arhiann said PSDs aren't the way to go about it. Jpeg, .jpg, .gif, .bmp, .png are the only image formats that will display in a browser as far as I'm aware.

freewhosting · 11-24-2009, 05:12 PM

Hi rgnau81,

What I would suggest doing is creating a background image that you can either "fade from" or "fade to". I.E., have a background image that has perhaps the colour blue in it (that you created in Photoshop) and then you can simply use the following CSS code:

Code:

<html>
<head>
<style type="text/css">
body { background: #003366 url(mybackground.jpg) no-repeat 0 0; }
</style>
</head>
<body>
<h1>Some test text</h1>
</body>
</html>

This code will create a solid blue background (#003366) with your image (mybackground.jpg) placed in the top left corner of the page and will not be repeated. However, what you could also do is place the image in the middle of the page (which works well for background images that are not particularly wide). To do this simply replace the CSS with:

Code:

<style type="text/css">body { background: #003366 url(mybackground.jpg) no-repeat 50% 0%; }</style>

This will place the image (background) 50% in the middle of the page (horizontal aligment). So if the user's browser window is wider than the graphic, you will then have your image bang in the middle, and the solid blue colour 'padding' around it.

Hope this helps answer your question a little bit. And also, the only supported image formats as background images are:

.gif, .jpg, .png, .bmp (sugget not using bitmaps though - not exactly web friendly!)

To save your file as a web file format, in photoshop select:

File > Save For Web

Or press the keyboard keys (Windows):

CTRL + ALT + S

You will then be able to preview the quality of the output image and save the file as either of the formats listed above

.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode