Making the header an image

  • Author
    Posts
  • #846342

    hpswimmer
    Member

    Hi all,
    I need help to get rid of website title and have an image instead. A very simple thing, you would think they would make this an option without having to edit css/

    anyway if anyone could help i would be most grateful! Really stuck!

    Do i add the css in the blank bit – why can i not go directly into it? I have the upgrade. Do i just add whatever CSS i need to that blank bit?

    many thanks!
    henry

    The blog I need help with is swimclubtapes.org.

    #846445

    hpswimmer
    Member

    Okay, I have added the image fine. But – it is massive and has made the page a lot bigger. How might I go about re sizing this?
    i need it to look pretty small.
    what code could this be to stop it repeating?

    thanks in advance
    henry

    #846447

    timethief
    Member

    I will flag this thread so it’s moved into the CSS forum where you can get Staff help with your CSS editing.

    #846503

    sl1k
    Member

    Thread moved to CSS forum section

    #846735

    How might I go about re sizing this? i need it to look pretty small.

    How small?

    I checked http://swimclubtapes.org/ and I found you added this CSS:

    h1 {
    text-indent:-40px;
    background:url('http://swimclublabel2.files.wordpress.com/2012/03/swimclub-logo-wo-dmsa3.jpg');
    width:1660px;
    height:522px;
    padding:.5px px;
    }

    Great start! I would recommend the following:

    First, pick a different size for the image. WordPress.com has a built in image resizer which is way cool. Here is an example for your image at a width of 150 pixels:

    http://swimclublabel2.files.wordpress.com/2012/03/swimclub-logo-wo-dmsa3.jpg?w=150

    Then update the url() in your CSS to use the updated image link.

    what code could this be to stop it repeating?

    Add “no-repeat” after the url() part and before the ; (see example below).

    If you also wanted to hide the text that currently says “Found” then you might use text-indent to move it off left. Here’s the final example you can use to replace what you currently have:

    h1 {
    text-indent:-40px;
    background:url('http://swimclublabel2.files.wordpress.com/2012/03/swimclub-logo-wo-dmsa3.jpg?w=150') no-repeat;
    width:150px;
    height:150px;
    text-indent: -9999px;
    }

    Adjust the width and height as necessary.

    #846747

    hpswimmer
    Member

    Great, thanks for the reply. Seemed to make a lot of difference, though it still does not show on homepage for some reason- which is odd. Should it not be on every page?
    Also – this not found thing – why is that there? Thanks for helping me – is appreciated.

    henry

    #846769

    Though this is an old thread, I just wanted to answer the question about the not found message. That is displayed if there isn’t any published content for the home page yet. This page explains how to fix it:
    http://en.support.wordpress.com/not-found/

The topic ‘Making the header an image’ is closed to new replies.