SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background images in CSS

    Hi - I'm trying to place a leaf image in page-center immediately above every <h1, h2 etc> tag. I'd like to have it in the CSS background so at any time I can change the image and it will change on every page. In a design-for-mobile thread Storm writes:

    -----begin quote-----

    if you already have the required images in the HTML folder (or wherever you keep your images) then in CSS, if you had this:

    #somediv {
    background: url(firstimage.gif) 0 0 no-repeat;
    }

    Then, BY HAND, you could change firstimage.gif to secondimage.gif. With this CSS method, you can change an image on every single HTML page with one line. If they were HTML IMGs then you'd have to change the IMG src on every single HTML page

    -----end quote-----

    Please could someone give me the exact html and css to do this? I can't get it to work. My image is "pg-mid-30.gif" in the "gr-all" subfolder.

    I used this in the html -

    <body>
    this is a test
    <img class="leaf" />
    <h1>Header One</h1>
    carry on talking
    </body>

    I feel I should have something after <class> but I don't know what? e.g. if I did:

    <img class="leaf" src="gr-all/pg-mid-30.gif" width="30" height="25" alt="leaf" />

    then surely I'd have to change the src on every page?

    Meanwhile in the CSS, based on Storm's example -
    background: #fff url(foo.gif) left center no-repeat fixed;

    I did this -

    .leaf {
    background: gr-all(pg-mid-30.gif) center center no-repeat fixed; /* left out bgcolor */
    }

    which did not work, so I tried this -

    background: url(gr-all/pg-mid-30.gif) center center no-repeat fixed;

    and this -

    background: url(gr-all\pg-mid-30.gif) center center no-repeat fixed;

    but nothing worked. Please can you tell me how to use CSS to place a leaf in page-center above each <h> tag? So I can easily change by hand that image in the css and it will change on every page?

    thanks! - Val

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, img is only used when you actually supply an img as content, not when you only want to supply a background-image (that's not part of your content).

    Then, you could apply your background to h1 / h2 since you want to have it immediately before every h1 / h2, and add a padding-top so that the background doesn't overlap the text, e.g.:

    Code css:
    h1, h2 {
    background: url(gr-all/pg-mid-30.gif) center top no-repeat fixed;
    padding-top: 25px;
    }

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remember that the path to the image is relative to your stylesheet (if it's external), otherwise it's relative to your page.
    So if your stylesheet is located in its own folder the path would be:
    Code:
    background: url(../gr-all/pg-mid-30.gif) no-repeat center center fixed;

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - thanks esp. for pointing out image is relative to css not page when it's background. I still can't get it to show up...

    I have this in the html -

    <body>
    Best automatic sprouter. <br />
    <img class="mid30" SRC="gr-all/pg-mid-30.gif" width="30" height="25" alt="leaf" />
    carry on talking
    <h2>Buy or Build One !</h2>
    carry on talking
    </body>

    and this in the CSS to place leaf above <h2> - css folder (1pr) and graphics folder (gr-all) are on same level below root

    h2 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    color: #f00251;
    background: url(../gr-all/pg-mid-30.gif) center top no-repeat;
    padding-top: 30px;
    padding-bottom: 1em;
    margin: 0;
    }

    In browser, I can see the leaf in the line after "sprouter" but it still does not show up above <h2>

    Can you see my error?

    thank you! - Val

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link?

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted it here

    sitepoint com/forums/showthread.php?p=3898087#post3898087

    thank you!


Tags for this Thread

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
  •