Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <hx> with images

    Hello,
    Can I define headings h1, h2, etc as having an image as well as text, just automatically? Sort of like the way they transform li bullets into images, but with hx instead? In my websearching I haven't been able to find a how-to.

    I tried:

    H1 {
    font-size: 190%;
    color: black;
    background-image: url(images/tri.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
    }

    but it doesn't seem to bring up the image, just does the 20px indent for

    <h1>This is a title</h1>

    Do I have to reference an image with every heading to get the same effect? Or am I missing something?

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Assuming your code it was a copy and paste. It works for me with a different image. I did drop H to h however. try "h1 {..." insted of "H1 {..."

    I dont recall if it is case sensitive but it is worth a shot just in case.

    If you still have problems can we see the page it is up in.

    MattyUK

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use 'h1 {' instead, and assuming your image actually exists, it should work fine. Also, you may wish to use 'background-position: center left' too.

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another thing that bugged me occaisionally at the beginning of doing css. Imagepaths are relative to the location of the stylesheet.

    so :

    index.html

    -includes
    -images
    +--your image is here
    -css
    +--your stylesheet is here


    When you include the stylesheet in the index.html the imagepath inside the css would be ' background : url(../images/yourimage.png)'.

    Just a tiny reminder.

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's why when writing global stylesheets you might as well use paths relative to the root:

    Code:
    <link ... href="/style.css">
    ...
    background-image: url(/images/bg.jpg);
    This way, no matter where you call it from, it's always going to look in the same spot.

    Not an option for people whose sites are something.com/something, though. However, mod_rewrite can solve the issues around that.

  • #6
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah. The infamous case sensitivity. That did it.

    Aaron sd:
    > Not an option for people whose sites are something.com/something, though. However, mod_rewrite can solve the issues around that.

    And that's what the site in question is, unfortunately. Thanks for the tip on mod_rewrite, I'll explore it and see what it's about.

    mstyle sd:
    >Imagepaths are relative to the location of the stylesheet.

    Found that out the hard way...

    Aaron, Matty, mstyle: You guys have come through for me again. Thanks, experts!


  •  

    Posting Permissions

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