Adding a Larger Header Image to Manifest Theme

  • Author
    Posts
  • #944942

    chemblack
    Member

    Hi All;

    I am trying my hand at CSS for the first time but nothing is working. I want to add a large header image that will replace the header text. From what I understand, I would take the custom CSS and paste it directly into the CSS style sheet editor, completely alone, and it would override the existing Manifest CSS. The code I am using is

    #header-image a img {
    display: none;
    }
    #header-image {
    display: block;
    margin: 0 auto;
    background: url(MEDIA LIBRARY URL*) no-repeat;
    width: 500px;
    height: 500px;
    }

    but when I pasted this in with the correct URL and saved, nothing on my site changed.

    What am I doing wrong?

    The blog I need help with is cheblack.com.

    #945016

    chemblack
    Member

    I was able to add a larger heading image and remove the title text using the following code:

    #site-title {
    background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png') no-repeat scroll center top transparent;
    height:301px;
    width:892px;
    margin-top:0;
    }

    h1#site-title a {
    display:none;
    }

    However I am having trouble center aligning the image with my site.

    #945180

    Your image is larger than the container area width, so you have two options: either make the image smaller or make the width of the site larger. Also, if you put the background image on the link instead of #site-title, then the header image will still be clickable.

    To make the image smaller:

    #site-title a {
    	display: block;
    	background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png?w=500') no-repeat scroll center top transparent;
    	width:500px;
    	height:168px;
    	margin-top:0;
    	text-indent: -9999px;
    }

    Or to make the width bigger:

    #site-wrapper,
    #main-nav ul ul,
    #core-content,
    #comments h3,
    legend span,
    #footer,
    .footer-content {
    	width: 892px;
    }
    #site-title a {
    	display: block;
    	background:url('http://cheblackdotcom.files.wordpress.com/2012/07/sample-header.png') no-repeat scroll center top transparent;
    	width:892px;
    	height:301px;
    	margin-top:0;
    	text-indent: -9999px;
    }

    Note that you may also need to make some additional adjustments to the spacing if you go with the 2nd option such as for the footer widgets, and you will want to update the limit width setting on Appearance → Custom Design → CSS to 892 for that option.

    #945181

    chemblack
    Member

    Thank you so much! I went with the second option, and now feel free to have my artist create my images.

The topic ‘Adding a Larger Header Image to Manifest Theme’ is closed to new replies.