Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

novice, please help

Discussion in 'Website Design Forum:' started by rgnau81, Nov 4, 2009.

  1. rgnau81

    rgnau81 New Member

    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

    <style type="text/css">


  2. Arhiann

    Arhiann Member

    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
  3. JMCDesigner

    JMCDesigner Member

    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.
  4. freewhosting

    freewhosting New Member

    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:

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

    <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 :icon_cheers:.

Share This Page