SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BYO website CSS url question

    Hi newbie here. Am trying to learn the art by reading the book "Build Your Own Website by Ian Lloyd and bumped into a gap on Chapter 5. Example code for loading background images to a website is "background-image: url(clouds.jpg);" The gap that is not explained is the "url(clouds.jpg)". There is no explanation for this code segment. Is the url some kind of pointer? Where should the image, clouds.jpg, be for the url to point to? Need help and thanks.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The image should be in the SAME folder as your HTML web page you are wanting it to display as a background.

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the quick response.

    I've tried putting the image in the same folder as the html page.
    I still seem to be missing something because the image is not showing up on the navigation segment as background.

    The exact code is under #navigation and reads as "{background: #7da5d8 url(backgrounds/Step - Rod Wedding Pic.jpg) no-repeat;"} in the css style sheet.
    Navigation has been declared as its own division in all the html pages. All html pages, the image "Steph-Rod Wedding Pic.jpg, and the css style sheet are (of the same level container, not within another container) contained within the same folder.

    Still floundering but best regards,
    Anton

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    According to message 3, the directory where your html page is located should contain a subdirectory "backgrounds" in which the image "Steph-Rod Wedding Pic.jpg" is located:

    /thewedding.html
    /backgrounds/Steph-Rod Wedding Pic.jpg

    In any case, you should put the url('path/filename') in quotes, single or double, otherwise spaces in the path or filename will be a problem.

    url('backgrounds/Steph-Rod Wedding Pic.jpg')


    If the css file were in a "css" directory, you might have to backtrack to get to the backgrounds directory. url('../backgrounds/Steph-Rod Wedding Pic.jpg')

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by anton.dee View Post
    The exact code is under #navigation and reads as "{background: #7da5d8 url(backgrounds/Step - Rod Wedding Pic.jpg) no-repeat;"} in the css style sheet.
    There's your problem right there – youa re not allowed spaces in a filename or path on the internet. If it isn't possible for you rename the image you can get around it be replacing the spaces in the filename with %20, but a better solution is to rename the image without spaces.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    As Stevie says, you have to be very careful about file names. A good practice is never to use capitals (for any of your code, indeed) and never have spaces in file names. You gave two versions of your file name above. Be aware that this:

    Steph-Rod Wedding Pic.jpg

    and this

    Step - Rod Wedding Pic.jpg

    do not match. That will cause a fatal error. So try something like this:

    step-rod-wedding-pic.jpg

    Initially—just to get this working and have a feeling of accomplishment—I'd keep everything (the page, the CSS file and the images) all in the one folder, and use a link to the image like this:

    Code:
    {background: #7da5d8 url(step-rod-wedding-pic.jpg) no-repeat;}

  7. #7
    SitePoint Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ronpat, Stevie D, and Ralph.m,

    I guess I've stumbled thru multiple issues here. The book did not explain about creating a backgrounds file, now its clear to me that there should be a backgrounds that houses the Steph-Rod Wedding Pic jpg. I guess it just means that I have to do a lot more practice so that many of the simple rules you guys have pointed out will become habit. No more cap letters for names, keep the names consistent, and avoid spacing as much as possible. Ralph, the code you wrote if I'm interpreting it correctly will give me the steph-rod-wedding-jpg each time I call for #background.

    Right now I keep all my images in a folder called gallery so that means I should have the pathname as gallery rather than background. Gallery is in the same folder as all my html and css files.

    Thank you again for your patience and I hope to give you more complex issues rather than simplistic ones such as this .

    Best regards,
    Anton

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by anton.dee View Post
    Ralph, the code you wrote if I'm interpreting it correctly will give me the steph-rod-wedding-jpg each time I call for #background.
    Not quite sure if we are speaking about the same thing here, but if you want an image as a background on an element, you have to specify that image each time.

    So, for example, if you wanted a background image on the <body> element on all pages of your site, in your CSS file, you would just do something like

    Code:
    body {background: url(my-image.jpg) no-repeat 0 0;}
    That one line will make the image appear on the body element of each page (in other words, underneath any other content on each page).

  9. #9
    SitePoint Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Yes, that was what I have in mind. I am putting a background image to my navigation div so instead of the word body, I will replace it with navigation.

    Thanks and regards,
    Anton

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by anton.dee View Post
    instead of the word body, I will replace it with navigation.
    Yes, that should work. Assuming your navigation div has a class, of, say "nav":

    Code:
    .nav {background: url(my-image.jpg) no-repeat 0 0;}
    But you'll need to make sure that the div is actually wrapping around the navigation items. If the nav items are floated, for example, that may not happen, unless you add

    Code:
    .nav {
    background: url(my-image.jpg) no-repeat 0 0;
    overflow: hidden;
    }

  11. #11
    SitePoint Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    The overflow: hidden; is a good tip, thanks.

    Anton


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
  •