Need help? Check out our Support site, then


Resizing Header Image

  1. smartbitesforbaby
    Member

    I need to upload a logo that is larger than the parameters allowed for the header image - is there a way to enlarge the parameters?

    The blog I need help with is smartbitesforbaby.wordpress.com.

  2. I would recommend setting up the image as a background image. Here is a basic example to get you started:

    #header-image-link img {
    	display: none;
    }
    #header-image-link {
    	background: url('http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png') repeat-x;
    	display: block;
    	width: 376px;
    	height: 145px;
    	border: 1px solid red;
    }

    Replace the url() value with your own image, and remove the red border before saving.

    I used a WordPress logo for the image in this example and set arbitrary width and height values. You should update those values to match your image size. As you can see if you apply the example, the background image area overlaps with the first menu in your header. You will need to decide what you want to do with the content on the right side of your hatter in order to give the background image more space. Consider consolidating the two separate menus into one.

  3. Hi!
    I have a same kind of problem. I use Imbalance2 and I have upgrade to Custom Design. I have a css editor loaded to my computer but I cannot find the whole style sheet anywhere so I could make the chances to get a full-length header image to my blog like here:
    Customizing Imbalance 2
    I don't know css but I'm sure I can chance the width if I only knew where it is and I cannot know if I don't see my style sheet.

    Thank you

    Kristiina
    Merkintöjä Melukylästä

  4. I cannot find the whole style sheet anywhere

    See here https://wpcom-themes.svn.automattic.com/imbalance2/style.css

  5. The best way to review CSS is by using your built in browser tools. You can access them by right-clicking on any element and selecting the "Inspect Element" option. In most modern browsers, that will open a panel that shows the HTML for what you clicked on highlighted on the left and all the CSS that applies to that element on the right. It's a better way to look at CSS for specific elements (like the width of a content area) because it covers more than just what's in style.css.

Topic Closed

This topic has been closed to new replies.

About this Topic