Normally, themes will use templates that create a header
div and a headerimage
div (usually located in header.php). The header image is a background image in the headerimage
div, and this is set in your stylesheet (normally style.css) like so:
#headerimage {
background: #ffffff url(img/header.jpg) no-repeat left top;
}
There will probably be other declarations in there such as margin
and padding
, as well as perhaps width
and height
, although the latter two often are left out if the image file’s dimensions are the same as those of the headerimage
div.
In my code above, the #ffffff
refers to a background colour that is described by the hexadecimal number ffffff
(which is white), and this means that if the header image i choose does not fill the headerimage
div, then the empty parts of the div will be filled with white. You can change this hexadecimal code to signify other colours, or use recognised keywords such as red
, black
, gray
, white
, etc.
The url
part of the code points to the image file’s location. In my example, I’ve used a ‘relative’ url, which means that the image will be ‘looked for’ in the folder ‘img’ which is a child of my website’s url. i.e. it will look in https://www.mysitesaddress.com/img/header.jpg
no-repeat
means that the image file will not be repeated horizontally nor vertically. This can be swapped for repeat-x
or repeat-y
or `repeat’ for both x and y.
Left top indicated the position of the header image in the div headerimage
. You may wish to use center top
, to center it horizontally.
To alter the image’s size, you can add this declaration to the css:
#headerimage img {
width: desiredwidthinpixelspx;
height: desiredheightinpixelspx;
}
Where either of desiredwidthinpixelspx
, or desiredheightinpixelspx
, can be replaced with auto, in which case the image would just retain it’s original dimensional proportions, and scale according to the width/height that you have set in pixels.
The fact that you get no blue bar at the top could possibly mean that your header
or headerimage
div is not closed properly, but could also mean that there is just no style applied to those elements.
If you could link your blog I could tell better.
Hope this helps,
– John