Support » Themes and Templates » Centering jpg in header

  • I have a custom header.jpg that I am using in place of the theme header.

    I am unable to get the custom header.jpg centered in the space alloted for the header.

    #header {
    background:#6D97B7 none repeat scroll 0 0;
    border:1px solid #AAAAAA;
    height:90px;
    margin: 0;
    }

    http://ybhatt.virtuallyassistingu.com/

    Thanks so much for the help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • http://www.w3schools.com/css/css_background.asp

    your header background is styled in two places:
    in an embeded style in header.php(?):

    #header {
    	background-image: url('http://ybhatt.virtuallyassistingu.com/wp-content/uploads/2010/02/coronado-top31.jpg');
    	background-repeat: no-repeat;
    	background-color: #6d97b7;
    	height: 280px;
    }

    which defines the background image and other properties of #header – but not the background position. therefore you can ignore it here.

    and in the #header style.css here:

    #header {
               background:#6D97B7 none repeat scroll 0 0;
              border:1px solid #AAAAAA;
                height:90px;
              margin: 0;
    }

    this line from style.css contains a lot of the header background styles in short form, including the background position:
    background:#6D97B7 none repeat scroll 0 0;
    background: #6D97B7 = color;
    background: none = image url – no image;
    background: repeat = repeat – repeated in both directions;
    background: scroll = scrolling with the page;
    background: 0 0 = coordinates: from left – 0px; from top – 0px;

    when you change the ‘ 0 0 ‘ to ‘ center -50px ‘ – your background image should be full in the header.

    if you look at your header background image (http://ybhatt.virtuallyassistingu.com/wp-content/uploads/2010/02/coronado-top31.jpg), it is actually much bigger than the space available in #header, and has a graphic rounded frame to it and a pale blue surounding area.

    Thread Starter dleonte

    (@dleonte)

    alchymyth,
    This worked: “when you change the ‘ 0 0 ‘ to ‘ center -50px ‘ – your background image should be full in the header.” and what a great lesson.

    I lost the pale blue frame at the top of my header background image. Can this be fixed by resizing the header background image? Or can it be taken care of with the margin attributes? I tried adding a 10px 0 0 0; but it did not solve my problem.

    Thanks so much.

    BTW: I looked at: http://www.w3schools.com/css/css_background.asp. but did not find a reference to ‘center -50px’. I clearly need to spend some time at that site. I love that it is interactive.

    did not find a reference to ‘center -50px’.

    it is not implicitly in the source i quoted. it is quite hidden in the background property table, under position ‘xpos ypos’.
    i learned about these very useful positioning details while disecting someone else’s css files.

    to get your blue border back on the header background, you havve two choices:

    1. set the design to fixed width:

    in style.css:

    /* Layout */
    #page {
    	/*min-width:740px;*/
    	/*max-width:1240px;*/
    width:946px;
    	margin:0 auto;
    }

    (in any case i would set the max-width to 946px – otherwise the header background will get too narrow for the page)

    and you could change the border color in #header in style.css to something blue-ish:

    #header {
               background:#6D97B7 none repeat scroll center -49px;
              border:1px solid #8d9cde;
                height:90px;
              margin: 0;
    }

    or 2.
    set #page max-width:944px;
    and change the border in the above style to:
    border:3px solid #8d9cde;
    and the #header background position to ‘center -51px’

    hope that made sense 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Centering jpg in header’ is closed to new replies.