SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Confusing......

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confusing......

    Hi

    I can't figure out why I'm not able to set my background, and was hoping someone could help. Ideally I want to do this with an external style sheet, but for the purposes of working out why the hell this isn't working I'm using an embedded one instead. This is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home</title>

    <style type="text/css">
    html { background : #00F url(C:\Users\Nick\Desktop\dom image\getting there\New Folder\DONE\Web code\pictures\Background.gif) }

    </style>
    </head>


    <body>




    </body>
    </html>

    and this is the W3C CSS validator info that I don't understand:
    3 html Value Error : background attempt to find a semi-colon before the property name. add it

    0 html Value Error : background Parse Error null

    3 html Property c doesn't exist : UsersNick\Ůsktop\00000dom imagegetting thereNew Folder\00000dONEWeb codepictures\000background

    3 html Parse Error code\pictures\Background.gif) }
    Can anyone help please? I'm new to this so I'm sure its simple.

    Cheers,

    Nick

    **edit: oh and it doesn't make a difference if I close the html style with a semi colon - i know i should

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right, i've now got it to pass the CSS validator:

    <style type="text/css">
    html { background : url("C:\Users\Nick\Desktop\DONE\Web code\pictures\Background.gif") no-repeat; }

    </style>
    </head>
    but NO image is displayed at all - even though it exists.


    **edit - I've tried moving the root directory of the picture and changed the format. Can't figure it out....

  3. #3
    SitePoint Addict
    Join Date
    Jan 2008
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depending on the page can you see it with a relative link? What about the absolute URL? I'm not a big fan of including the abs directory of a file on the filesystem in a page.

  4. #4
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Move your background.gif to the same folder as the Web page you want the background image to be and use this code:

    Code HTML4Strict:
    <style type="text/css">
     
    body { 
    background: url("background.gif") no-repeat; 
    }
     
    </style>
    </head>

    You should ideally have the names of files, including images and folders in lowercase WITHOUT spaces, instead of spaces use hythens, web-code instead of web code.

    And you should be fine Or you can keep it in your pictures folder and just change it to:

    Code HTML4Strict:
    background: url("/pictures/background.gif") no-repeat;

    Hope this helps. Goodluck!

    Andrew Cooper

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! worked nicely - thought it was the image source.

    can't seem to make it stretch though: found this guide http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

    but surely there must be a better way of doing it (ie for specific sized monitors). - at the moment it looks horrible and stretched on my widescreen (image is 1204x786)

    [IMG][/IMG]

    i could cut it up into slices and position each part on each side - would that seem more sensible?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or i could take a very thin slice and repeat it down each side and then place corner images at each corner and set the z-index so they appear in front.

    ??????

  7. #7
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    No problem j3ff3!

    After seeing the example from that guide -- I wouldn't recommended using it. I guess it depends really on what your background image is. Is it possible you could have the blue part as one image, the background image for the body, and then have the white-ish part as another background image and have that for your main content area background image? Or do you want that as a background image stretched? I don't think that having that image stretched would look very nice.

    I don't know any way of making an image like that stretch, having it look good, that is a good solution to your problem. Hope that...Helps.

    All the best,

    Andrew Cooper


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •