May 042015
 

KompoZer Insert Header Image shows you how to insert a header image to the header.

Last Updated: April 14, 2023

Latest News: I removed a broken link.

In this lesson you will learn how to insert a header image to the header and add the correct image path whether it be relative or static.

KompoZer Insert Header Image Steps

Step 1 ) The following image shows you where you need to click with your left mouse to select <div#header> tag as shown in arrow 2 below.

Note: Make sure you click inside the div tag as shown in arrow 1 below.

kompozer-insert-header-image

Step 2 ) Click on Insert -> Image to search for the image you want to insert. See image below.

kompozer-select-insert-menu

Step 3 ) The following image Image Properties -> Location allows you to set up the following options.

  • Image Location = Click on the folder to browse for the image location or you can type the URL path i.e. http://yourwebsite.com/images/imagename.jpg
  • URL is relative to page location. In this example the relative path is images/kompozer-header-mbrsolution.jpg (This option is optional. For this example I selected URL is relative….) I don’t encourage relative path. It is always best to select a static path.
  • Tooltip
  • Alternative text = For this example I added an alternative text KompoZer Header Image
  • Don’t use alternative text
  • Image Preview = Notice the image size 990 x 202
  • Advanced Edit
  • Click on OK when you finish adding your image

kompozer-image-selected

Step 3-1 ) The following image shows you the path added when you don’t select URL is relative to page location. The following path is added file///E:/….. because this was added from a local laptop. If you were working from a server then you might choose a static path http://yourwebsite.com/images/imagename.jpg. (Note: Your path will be different.)

kompozer-url-not-relative

Step 4 ) The following image shows you the header image added.

Note: The image is sitting nicely in between all the div tags. Remember to resize the images to fit in nicely.

kompozer-image-added

Click on the following URL Borders Tutorial to continue.

Go Back To KompoZer Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

five + 5 =