Adjusting Twenty Eleven Header Image

• 

  themabelkwong · Member · Apr 28, 2015 at 1:19 pm

  • Copy link
  • Add topic to favorites

  I have the CSS upgrade and have inserted a header image using this code:

  #branding {
  background: url(‘https://themabelkwong.files.wordpress.com/2015/04/mabelkwong_final15.png?w=900’) no-repeat scroll 0 0 transparent;
  height: 500px;
  }

  However, my header doesn’t seem to be in the middle and I want it centralised. I tried inserting this code with the word “center” but then the header disappears:

  #branding {
  background: url(‘https://themabelkwong.files.wordpress.com/2015/04/mabelkwong_final15.png?w=900’) center no-repeat scroll 0 0 transparent;
  height: 500px;
  }

  How can I make my header centralised?

  Aside from that, my header doesn’t seem to be that responsive when I shrink my screen. See this image that I took a screenshot off:

  

  As you can see, the header gets cut off to the right the more I shrink the screen.

  Any help will be appreciated. Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 28, 2015 at 10:48 pm

  • Copy link

  Hi there, in the background declaration where it says 0 0, change that to center top.

• 

  themabelkwong · Member · Apr 29, 2015 at 9:57 am

  • Copy link

  Thank you, SacredPath. It worked like a charm and now my header is in the center of the page.

  It doesn’t seem to adjust to the width of the page when I resize my browser. Here is a screenshot showing this:

  

  Is there a workaround?

• 

  thesacredpath · Member · Apr 29, 2015 at 4:14 pm

  • Copy link

  This is a hard thing to do when inserting an image into the CSS. We can set a background size declaration to resize the image, but then on smaller screens you end up with a large gap between the image and the menu. You can add the following to your #branding rule to see what I mean.
  background-size: contain;
  To adjust positions so that a large gap doesn’t occur between the image and menu, and between the menu and content, we would need the following Media Queries.

  @media screen and (max-width: 850px) {
  	#access {
  		margin-top: 500px;
  	}
  }
  @media screen and (max-width: 800px) {
  	#access {
  		margin-top: 450px;
  	}
  }
  @media screen and (max-width: 750px) {
  	#branding {
  		height: 400px;
  	}
  }
  @media screen and (max-width: 650px) {
  	#branding {
  		height: 300px;
  	}
  	#access {
  		margin-top: 300px;
  	}
  }
  @media screen and (max-width: 550px) {
  	#access {
  		margin-top: 250px;
  	}
  	#branding {
  		height: 250px;
  	}
  }
  @media screen and (max-width: 450px) {
  	#access {
  		margin-top: 200px;
  	}
  	#branding {
  		height: 200px;
  	}
  }
  @media screen and (max-width: 380px) {
  	#access {
  		margin-top: 200px;
  	}
  	#branding {
  		height: 150px;
  	}
  }

• 

  themabelkwong · Member · Apr 30, 2015 at 1:37 pm

  • Copy link

  Thanks for that. I added that to my CSS:

  #branding {
  border-top: none;
  padding-bottom: 10px;
  position: relative;
  z-index: 9999;
  background-size: contain;
  }

  Then I added the media queries as you’ve specified. However, the header image still isn’t resizing itself. Is there a workaround or is it just me? (I’ve taken out the code I inserted).

  Thank you.

• 

  thesacredpath · Member · Apr 30, 2015 at 9:55 pm

  • Copy link

  Hi there, at the bottom of you existing CSS, add the background-size:contain; to the #branding rule where your image is set and then add the media queries after that. When I tried that in your Custom CSS, it worked for me.

• 

  themabelkwong · Member · May 1, 2015 at 1:50 pm

  • Copy link

  Hi SacredPath. Thanks so much for that. The code worked. I initially stuck the background-size:contain in an earlier #branding rule, that was probably why it didn’t work.

  Now it works, and I will stick the codes in. Much thanks!

• 

  thesacredpath · Member · May 6, 2015 at 2:30 am

  • Copy link

  You are welcome.