{"id":1821,"date":"2012-09-30T17:11:18","date_gmt":"2012-09-30T17:11:18","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/09\/30\/new-banner-image\/"},"modified":"2022-02-21T14:45:01","modified_gmt":"2022-02-21T19:45:01","slug":"new-banner-image","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/","title":{"rendered":"How to change the banner image in Joomla 3.1"},"content":{"rendered":"

In our testing of the blog sample data<\/a> in Joomla 3.0, we noticed the header image of raindrops on each of the pages. In this tutorial, we\u2019ll show you how to change the banner image (as seen in the screenshot below) in your Joomla Hosted website.<\/p>\n\n\n\n

\"blog-banner-image\"<\/a><\/figure>\n\n\n\n

How is the current header image being displayed?<\/h2>\n\n\n\n

The raindrops.jpg image in the header, which is 700px by 180px, is not hard coded into the template. It is simply a custom HTML module that shows the image, that is placed in position-3 (learn about finding template positions here<\/a>).<\/p>\n\n\n\n

How can I change the header image?<\/h2>\n\n\n\n
  1. Log into your Joomla 3.0 administrative dashboard<\/a><\/li>
  2. In the top menu, click Extensions<\/em> and then click Module Manager<\/em><\/li>
  3. Find and click on the Image<\/em> module. By default, it is in position-3 and is a Custom HTML module.<\/span>
    \"Change<\/li>
  4. Click the Custom Output<\/em> tab.<\/div><\/li>
  5. As there is already an image here, click the image<\/em> within the editor, and then click the <\/span>Image<\/em> button under the editor.<\/span>
    \"click-the-image-then-click-image-button\"<\/li>
  6. Using the media manager<\/em> that shows up, either browse for an existing image towards the top of the media manager, or scroll down to the bottom of the media manager and upload a new image. After selecting the image, click the Insert button at the top right. You will be brought back to the editor, where you will then see your new image show. Click Save<\/strong> in the top left.<\/span>
    \"choose-new-image-and-click-insert\"<\/li>
  7. In our testing, we navigated to the headers<\/em> folder and selected the <\/span>maple.jpg<\/em> image.<\/span> After saving the changes, when you visit your website again, you should see the new header image appear (as in the screenshot below).

    \"new-header-image-now-shows\"
    \n<\/div><\/li><\/ol>","protected":false},"excerpt":{"rendered":"

    In our testing of the blog sample data in Joomla 3.0, we noticed the header image of raindrops on each of the pages. In this tutorial, we\u2019ll show you how to change the banner image (as seen in the screenshot below) in your Joomla Hosted website. How is the current header image being displayed? The Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,94],"tags":[4404],"class_list":["post-1821","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"\nHow to change the banner image in Joomla 3 Explained<\/title>\n<meta name=\"description\" content=\"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change the banner image in Joomla 3 Explained\" \/>\n<meta property=\"og:description\" content=\"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-30T17:11:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-21T19:45:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to change the banner image in Joomla 3.1\",\"datePublished\":\"2012-09-30T17:11:18+00:00\",\"dateModified\":\"2022-02-21T19:45:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\"},\"wordCount\":281,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif\",\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\",\"name\":\"How to change the banner image in Joomla 3 Explained\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif\",\"datePublished\":\"2012-09-30T17:11:18+00:00\",\"dateModified\":\"2022-02-21T19:45:01+00:00\",\"description\":\"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif\",\"width\":750,\"height\":666,\"caption\":\"blog-banner-image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change the banner image in Joomla 3.1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to change the banner image in Joomla 3 Explained","description":"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/","og_locale":"en_US","og_type":"article","og_title":"How to change the banner image in Joomla 3 Explained","og_description":"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-09-30T17:11:18+00:00","article_modified_time":"2022-02-21T19:45:01+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif","type":"","width":"","height":""}],"author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to change the banner image in Joomla 3.1","datePublished":"2012-09-30T17:11:18+00:00","dateModified":"2022-02-21T19:45:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/"},"wordCount":281,"commentCount":19,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif","keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/","name":"How to change the banner image in Joomla 3 Explained","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif","datePublished":"2012-09-30T17:11:18+00:00","dateModified":"2022-02-21T19:45:01+00:00","description":"You'll notice that there is a banner image in your Joomla 3.0 template by default. In this tutorial we'll show you how to change this header image.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2012\/09\/edu_joomla-3_blog_blog-banner-image.gif","width":750,"height":666,"caption":"blog-banner-image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/new-banner-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to change the banner image in Joomla 3.1"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4403,"name":"Joomla","slug":"joomla","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1821"}],"version-history":[{"count":6,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1821\/revisions"}],"predecessor-version":[{"id":94303,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1821\/revisions\/94303"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}