SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member tjay01's Avatar
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Background Images With CSS and XHTML

    Can somebody help me pleased, I just want to know how to build
    background images in CSS and XHTML

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by 'build background images in css and xhtml'?

    An image is made using a graphics package e.g. photoshop.

    you then 'hang' this image on an element.

    E.G.

    Code HTML4Strict:
    <div id="header">
        <h1>Your Site Name</h1>
    </div>

    Code CSS:
    #header {
        background: url(Images/headerImage.png) no-repeat;
    }

    I hope this helps.

  3. #3
    SitePoint Member tjay01's Avatar
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi James,
    thanks for the e.g. - am familar with this approach,;
    but I do not understand the whole thing on [image back-
    ground]. with css and xhtml. [ok well some]

    I could just, from my html editor click on insert, go into my
    graphic folder and insert an image.

    Example:

    <html>
    <div class="galleryphoto">
    <img src="Gallery/turtle-bite.jpg">
    </div>

    Once inserted, it will be seen in design view.
    And help with CSS it will make a big
    difference.

    Example:

    CSS

    .galleryphoto img {
    border: 15px solid white;
    }

    The image am trying to create is a water-mark; that goes as
    a background behind a navigation.

    What confuse me is the 'URL' like what you just ,
    mension, is it something you have to go on line
    to get? URL background, dont know, just
    querying,.

    Maybe you can enlighten me a bit more
    For example:

    #navigation {
    width: 180px; /* No Problem*/
    height: 484px; /*No Problem*
    background: #7da5d8 URL (backgrounds/nav-bg.jpg) no-repeat;
    }

    What's with this URL(background/nav-bg-jpg) no-repeat; [thing].
    Am just trying to look for a quich solution to this problem.

    Thanks Anyway

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's all to do with separation of presentation and content.
    HTML should say WHAT something is.
    CSS should say HOW something looks.

    If an image is content, ie you have a news article with an accompanying image then you should insert that image using
    Code HTML4Strict:
    <img src"" />

    If the image is only for presentation, ie background images on the navigation, they should be implemented using the 'background' property within the css.

    Code CSS:
    background: #7da5d8 URL url(backgrounds/nav-bg.jpg) no-repeat;
    simply means that element's colour will be #7da5d8, it will then have an image (backgrounds/nav-bg.jpg) on top of that. that image will not repeat.

    The URL is literally a link to the image, be that on your ftp site or hosted somewhere else, it's the same link that would go in the
    Code HTML4Strict:
    <img src"" />

    If the user then disables styles, they will be served a pure html page. You don't want this cluttered with useless presentational images, only relevant content related images.

  5. #5
    SitePoint Member tjay01's Avatar
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok lets say I have a navigation list as follows:
    <html>
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->

    <!--The CSS For This Will Be:-->

    #navigation {
    width: 180px;
    border: 1px dotted navy;
    background-color: #7da5a8;
    }

    <!--Then I wanted to put a watermark url background image behind the Navigation Listings as follows -->

    CSS
    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }

    Now what's the xhtml codes that will be responsable for the background URL Navigation?.

  6. #6
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css will assign those properties/attributes to any element with an id of 'navigation'.

    So providing you want to set the image on the div, you've got it right.

    The div will get the properties set by this bit of css

    Code CSS:
    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }


    BUT

    You could reduce your code, the div is redundant so why not target the ul

    Code HTML4Strict:
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>

    This way you've got rid of the div and targeted the ul element.

    Div's are used for grouping related items. Your nav items are already in a list so you don't need this div.

  7. #7
    SitePoint Member tjay01's Avatar
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand fully what you are saying to me on this topic.
    but my last problems is :

    <!--Then I wanted to put a watermark url background image behind the Navigation Listings as follows --> Meaning as a background so that my
    Navigation sit on top the background url images.

    But cannot figure out the code in xhtml that would make this happen.

    CSS
    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }

    Now what's the xhtml codes that will be responsable for the background URL Navigation?.

    For what you have thought me has made me understand alot more,
    than I bargaining for...Thanks! much apreciated

  8. #8
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want a watermark on every nav item the html would be:

    Code HTML4Strict:
    <ul id="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>

    The CSS is as follows
    Code CSS:
    #navigation li {
        background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; /*This assigns a colour and an image to the li element*/
        width: 180px;
        height: 484px;
    }

    What we've done is used a class and a selector

    Code CSS:
    #navigation li {

    This targets all li elements with the parents id of navigation.
    The background is applied to the li element rather than the ul.

    If you then want to put a border around the whole list you can target the ul via it's class

    Code CSS:
    #navigation {
        border: 1px navy dotted;
        width: 180px;
    }
     
    #navigation li {
        background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; /*This assigns a colour and an image to the li element*/
        width: 180px;
        height: 484px;
        border: 0; /*This stops the li element inheriting the border property from it's parent*/
    }

    Hope that helps


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
  •