WordPress.com

1. willowsharp
   Member
   Jan 7, 2013, 5:55 AM

   Hello!

   I am having the same problem that lots of other people seem to have had...trying to increase the size of my header in my Imbalance 2 theme blog, to go across the whole page!

   I have been doing lots of reading: and have tried the solution offered here: http://en.forums.wordpress.com/topic/enlarging-your-header-image-in-imbalance2?replies=4#post-790098, using multiple images, and no change seems to occur...

   I do have the CSS upgrade, and am using (or trying to) an image that is 1000px wide, by 350pix high.

   I would like this to simply stretch across the whole screen (I have the Fluid option selected).

   I am sure I am just missing something really obvious, and I am trying to learn how CSS works, but I admit I am very new to it so thank you for your patience.

   Thank you so much. WordPress really is amazing.

   The blog I need help with is aboxwelltravelled.com.

2. designsimply
   Staff
   Jan 11, 2013, 8:54 PM

   You'll probably have to make some different adjustments since you're using the fluid option.

   Add this except replace the url() value with your image:

   #branding {
   	background: url('http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png') no-repeat;
   	width: 1000px;
   	height: 350px;
   }

   Then if you're still having trouble, post back here with the link to your blog so someone can help you take another look.

3. willowsharp
   Member
   Jan 12, 2013, 4:02 AM

   Thanks so much designsimply, that worked! Wow. And I played around with different sized images, with each time the new measurements adjusting on cue...thank you soooo much, it's incredibly mind-blowing for such a code beginner as me to see how simple little changes can make such a huge difference.

   Now...you guessed it, I have just two more questions. At the moment there is quite a large white gap between the horizontal line that is created by the bottom of my widgets in the top right hand corner (where the FB logo is) / the bottom of the header image, and where the blog entries start below it. Is there a way to reduce this distance, so that the faint grey line can sit more snugly beneath? Hmm.

   Also, when I increase / decrease the size of my browser, the location of the blog's additional page moves too. Is there a way to stabilise this? Or it it just par to the parcel with the Fluid layout? Ideally, I would like it to sit neatly on top of the widget in the top right hand corner...

   ...thanks so much for all your help in advance again, WordPress is a pretty damn fine resource. Thank you!

4. designsimply
   Staff
   Jan 18, 2013, 10:49 PM

   There is quite a large white gap between the horizontal line that is created by the bottom of my widgets in the top right hand corner (where the FB logo is) / the bottom of the header image, and where the blog entries start below it. Is there a way to reduce this distance, so that the faint grey line can sit more snugly beneath?

   Try this:

   #header {
   	padding-bottom: 0;
   }

5. designsimply
   Staff
   Jan 18, 2013, 10:55 PM

   Also, when I increase / decrease the size of my browser, the location of the blog's additional page moves too. Is there a way to stabilise this? Or it it just par to the parcel with the Fluid layout?

   First, try adding this and just previewing and then change the width of the browser again. It will help you visualize what's happening:

   #branding {
   	border: 1px solid blue;
   }
   
   #header-left {
   	border: 1px solid red;
   }

   Then edit the "1024px" in the "#branding" block of CSS to "600px" to make the #branding area smaller so everything fits a bit better when the browser size is smaller and preview again. If you like it, get rid of the red and blue borders and save changes after that.

Topic Closed

This topic has been closed to new replies.