Making the header an image

  • Unknown's avatar
    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: (visible only to logged in users)

  • Unknown's avatar
    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

  • Unknown's avatar
    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.

  • Unknown's avatar
    sl1k · Member ·

    Thread moved to CSS forum section

  • Unknown's avatar
    designsimply · Member ·

    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:

    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.

  • Unknown's avatar
    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

  • Unknown's avatar
    designsimply · Member ·

    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:

    Create a Custom 404 Page

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