Resizing Header Image

smartbitesforbaby · Member · Jul 12, 2013 at 7:11 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
designsimply · Member · Jul 12, 2013 at 7:38 pm
Copy link
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.
krisuh · Member · Jul 15, 2013 at 7:20 pm
Copy link
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ä
timethief · Member · Jul 15, 2013 at 7:25 pm
Copy link
I cannot find the whole style sheet anywhere

See here https://wpcom-themes.svn.automattic.com/imbalance2/style.css
designsimply · Member · Jul 17, 2013 at 1:52 pm
Copy link
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.

No items found.