SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS background-image property

    This follows on something I raised yesterday (see 'class or id selectors with javascript').
    I've done a template for a set of "location" pages which will be aimed at and optimized for people who are looking for particular goods/services in particular locations. These pages will be linked to an order engine on a separate website so that -- for instance -- if you selected Product A from newsite.com/reading.html, you would be transported to an order form on existingsite.com on which the product and location were already selected.

    And what has this to do with CSS, you ask? Bear with me, please.

    In establishing design criteria for the new site, one of the major appeals of CSS layout (as opposed to tables) was the prospect of leaner code in which content was more visible and accessible to search engine spiders. So in my mind, anything which would bloat the code is at least suspect and must be justified.

    Which brings me to javascript.
    I am persuaded that we need some; at very least, to make the links to the appropriate dynamic pages on existingsite.com
    It has been proposed that we also use javascript as an internal work-saver on newsite.com to handle images which are repeated on many pages. That way -- the logic goes -- we can change an image on many pages with a single change in a .js file.

    I'm wondering if the same thing could be accomplished (with far fewer visible lines of code in the html) using the background-image property in CSS.
    If the image name and location can be specified in the rule for a DIV ID or DIV CLASS -- let's say: .prodimage1 { (other rules), background-image: url(../images/prodimage1.jpg); } -- then that class (or ID) could be used on many location pages, and the image on all of them could be changed by making a single alteration back in the CSS file. Or am I missing something?
    Assuming that this idea would work, can anyone point to disadvantages as compared to solving the problem with javascript?
    Thanks, Cam

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by camm
    I'm wondering if the same thing could be accomplished (with far fewer visible lines of code in the html) using the background-image property in CSS.
    Yes it can be achieved easily, and with less code than with JavaScript.

    Quote Originally Posted by camm
    If the image name and location can be specified in the rule for a DIV ID or DIV CLASS -- let's say: .prodimage1 { (other rules), background-image: url(../images/prodimage1.jpg); } -- then that class (or ID) could be used on many location pages, and the image on all of them could be changed by making a single alteration back in the CSS file. Or am I missing something?
    Only issue you're missing is an ID can only be used once, so it would need to be a class or defined within the body tag within an external style sheet


    Quote Originally Posted by camm
    Assuming that this idea would work, can anyone point to disadvantages as compared to solving the problem with javascript?
    I can't point you to anything in specific but think for a second what CSS and JavaScript do. Why do you want to do this with JavaScript? JavaScript is a client side scripting language, CSS is used to presentation of images, elements, classes, etc. Use the technology that is designed for this particular task. CSS is the way to go.

    styles.css (which is external)

    Code:
    body{
       background-image:url(something.jpg);
    }
    index.html, about us, contact, etc on and on

    Code:
    <html>
    <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    
    </body>
    </html>
    Make one change to the image in the external style sheet and you're done. Simple as that.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan ... that confirmation is reassuring. A number of times on this venture I've been quite sure I knew what I was doing, only to find ...
    Only issue you're missing is an ID can only be used once, so it would need to be a class or defined within the body tag within an external style sheet
    Actually I considered that. Right now the template calls for three product images side by side. As I understand the rule, ID can be used once per page, so assuming I called them #prodimage1, #prodimage2, #prodimage3 I should be able to use each of those DIV ID's on each separate location page like /calgary.html, /albuquerque.html, /entebbe.html .
    Right? On the other hand, no reason not to use classes in this instance.
    Cam

  4. #4
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either way will work, creating a unique div or class. My preferred method, since I like to stick to standard schemes as much as possible and general coding practices, use classes in this instance, this what they are designed for, to be used over and over again. Just be careful in future practices not to overuse classes. What I mean by that is don't do this:

    .class{
    color:#FF00000;
    }

    .class_two{
    color:#FF0000;
    }

    Then on two separate pages, some people will use the first rule and on the second page use the second rule. There's no need to. Simply use the first.

    But you'll be fine in this instance. Just do something like .product1, .product2, etc to suit your needs.

    Be smart and careful about your design, it will alleviate headaches in the future, believe me, I know.
    Ryan Butler

    Midwest Web Design

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It has been proposed that we also use javascript as an internal work-saver on newsite.com to handle images which are repeated on many pages. That way -- the logic goes -- we can change an image on many pages with a single change in a .js file
    You could have just uploaded a new image with the same name and that would have done the trick - no coding necessary.

    Of course controlling your page presentation is what css is about and you can control the whole look of the site simply by changing the css.

    Paul


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
  •