Hide site title / tag line and change image size

  • Author
    Posts
  • #795677

    I would like to:
    1. Replace my blog image with an image of a different size (780×273) – this image complies to our branding requirements.
    2. The image contains the name of the blog title and tag line so I want to hide this text that currently appears above the image.
    3. Although the blog title and tag line will be hidden to visitors, I don’t want it to be invisible to search engines!
    I’m using the Freshy theme and have the CSS customisation upgrade.
    Can someone help me with this?
    Many many thanks in advance!!

    The blog I need help with is mededucconversations.com.

    #795874

    Can we get a link to the site and also if you could upload the header image to your media library and then give us a link to it that would help a lot.

    #795882

    Here’s the link to the site: http://mededucconversations.com/
    Here’s the link to the header image: http://mededuc.files.wordpress.com/2012/01/med-blog-full-banner-final-with-text.jpg

    My deadline is looming – thanks a lot for your quick response.

    #795883

    To replace the header image, try this:

    #title_image {
      background-image: url(http://mededuc.files.wordpress.com/2012/01/med-blog-full-banner-final-with-text.jpg);
      height: 273px;
    }
    #795890

    This code worked beautifully. The larger banner is now in place. It’s just the blog title and tag line to sort out now.
    Thank you, designsimply.

    #795897

    Looking into it. I’m trying to find a good way to get the header image you want plus the background shadows which are done in Freshy with background images. If you don’t mind the extra space at the top, you can just offset the text for the site title and tagline and it will also keep the shading too:

    #title h1, #title .description {
      text-indent: -9999px;
    }
    #795899

    Ideally, I’d like to reduce or remove the extra space at the top, but not at the expense of stopping the search engines reading our name and tag. If you’re able to think of a solution to this it would be perfect.
    In the meantime, I’ve applied the code you provided to off set the text and the blog can certainly be announced in its current format so thank you very much for that.

    #795932

    Try replacing all of that first stuff with this instead:

    html > body #title {
    height:258px;
    background-image:url('http://mededuc.files.wordpress.com/2012/01/med-blog-full-banner-final-with-text.jpg');
    background-repeat:no-repeat;
    background-position:center bottom;
    background:url('http://mededuc.files.wordpress.com/2012/01/med-blog-full-banner-final-with-text.jpg') no-repeat center bottom, url('http://s0.wp.com/wp-content/themes/pub/freshy/images/header.gif') no-repeat, url('http://s0.wp.com/wp-content/themes/pub/freshy/images/page_bg.gif') repeat-y;
    }
    
    #title h1,#title .description {
    text-indent:-9999px;
    }
    
    #title_image {
    display:none;
    }

    Note that the line to add multiple backgrounds will not work in older browsers, but the extra lines before it will make it so older browsers (like IE8 and below) will get the header image and newer browsers that support multiple backgrounds (CSS3) will get both the header background image and the surrounding shadows.

The topic ‘Hide site title / tag line and change image size’ is closed to new replies.