Adding an image to the header

  • Don’t throw the rotten tomatoes yet! I did search, and found some great info on using a background image as the header. But I couldn’t find a post on how to add a single jpg image in there, as a “logo” so to speak. I’m using the template that came with it, although, despite having to breath into a paper bag the entire time, I’ve been messing around with the css and layout to change colors, etc. What I’d like is to leave the header/title as it is, but stick a jpg image on the right side, where it butts up against the menu box. ( https://shannonstacey.com ) This is what my header reads like now:

    #header {
    background: #ccccff;
    border-bottom: double 3px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-top: solid 1px #000000;
    font: italic normal 230% ‘Times New Roman’, Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 15px 10px 15px 60px;

    I’m sure I’ll be spending eons wearing out the search function in these forums, but if somebody could point me in the right direction for this one thing, I’ll muddle through the rest. (Oh, and if you go to the site, don’t look at the calendar. Yes, I’ve messed that up already. And I haven’t even tried to import from blogger yet.)

    Thank you,

    Shannon (the very, very new at html, never mind css and php)

Viewing 5 replies - 1 through 5 (of 5 total)

  • Shannon you’ve got a lot of options in front of you. Try playing with

    background: url(images/whatever.jpg) #ccccff;

    the url will have an image you can put in there, and then the background colour will stay the way it’s meant to.

    It might tile itself so you’ll have to add another option no-repeat for it to appear once soo:

    background: url(images/whatever.jpg) #ccccff no-repeat;

    I think your best bet is to go to the W3C website and have a look at their css for beginners. Loads of good stuff there.

    Except that will leave it on the left….to get it on the right, try this:

    background: url(images/whatever.jpg) #ccccff no-repeat middle right;

    Or “top right” or “bottom right” even… try playing around with them and see which one you like best.

    Tg

    I’m having trouble with my site (decided to make it a bit more “reader-friendly”). I’d like to add a header, but I’m stuck. I’ve been following the instructions on various CSS help sites, but something seems to be overriding any changes I make.

    Here’s what I’ve got for header styles:

    #header {
    margin: 0;
    padding: 10px;
    height: 50px;
    text-align: center;
    }

    html>body #header {
    right: 20px;
    }

    #header h1 {
    margin: 0 auto;
    padding: 0;
    font-size: 150%;
    font-weight: normal;
    letter-spacing: 0.3em;
    border-bottom: 1px solid #000000;
    text-transform: uppercase;
    }

    #header p {
    margin: 0;
    color: #000000;
    font-size: 0.9em;
    }

    #header a {
    color: #ACC8E2;
    text-decoration: none;
    border: none;
    }

    #header a:hover {
    text-decoration: underline;
    }

    Is there something I should change on the index page? I’m trying to link to a gif (https://www.biglittleg.com/blog/wp-images/bitsandbytes.gif) if that helps.

    Thanks.

    I think it might have something to do with the #rap, now that I look at it.

    Sorry – should say I’m trying to modify a template.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding an image to the header’ is closed to new replies.