{"id":218,"date":"2024-03-17T17:35:26","date_gmt":"2024-03-17T17:35:26","guid":{"rendered":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/?p=218"},"modified":"2024-03-17T17:35:27","modified_gmt":"2024-03-17T17:35:27","slug":"changing-your-sites-header-image","status":"publish","type":"post","link":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/changing-your-sites-header-image\/","title":{"rendered":"Changing your site\u2019s header image"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Changing your site\u2019s header image<\/h2>\n\n\n\n<p>Changing your site\u2019s header image is a quick and easy way to customize your site. A header image refers to the image that appears at the top of every page in many&nbsp;<a href=\"https:\/\/openlab.sps.cuny.edu\/help-documentation\/themes-changing-the-appearance-of-your-site\/\" data-type=\"post\" data-id=\"204\">themes<\/a>&nbsp;(see example below). Depending on your theme, however, the header image will appear differently.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_1.png?resize=1024%2C437&#038;ssl=1\" alt=\"\" class=\"wp-image-219\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_1.png?resize=1024%2C437&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_1.png?resize=300%2C128&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_1.png?resize=768%2C328&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_1.png?w=1112&amp;ssl=1 1112w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>1. To change your site\u2019s header, you need to navigate to the&nbsp;<strong>Dashboard<\/strong>&nbsp;and select&nbsp;<strong>Header<\/strong>&nbsp;under&nbsp;<strong>Appearance<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_2.png?resize=1024%2C501&#038;ssl=1\" alt=\"\" class=\"wp-image-220\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_2.png?resize=1024%2C501&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_2.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_2.png?resize=768%2C376&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_2.png?w=1202&amp;ssl=1 1202w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>2. Pay attention to the image size recommendations that are stated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"313\" height=\"536\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_3.png?resize=313%2C536&#038;ssl=1\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_3.png?w=313&amp;ssl=1 313w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_3.png?resize=175%2C300&amp;ssl=1 175w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/figure>\n\n\n\n<p>3. To upload an image to use, click&nbsp;<strong>Add new image.&nbsp;<\/strong>Click<strong>&nbsp;Upload Files<\/strong>&nbsp;to find an image from your computer or go to&nbsp;<strong>Media Library&nbsp;<\/strong>and&nbsp;<strong>Select and Crop&nbsp;<\/strong>if you already have an image in your media library you want to use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_4.png?resize=1024%2C423&#038;ssl=1\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_4.png?resize=1024%2C423&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_4.png?resize=300%2C124&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_4.png?resize=768%2C317&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_4.png?w=1202&amp;ssl=1 1202w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>4. Once you\u2019ve chosen an image, you\u2019ll be given the chance to crop it. Move the cropping window around to choose the section of the image you want to use. Some themes allow you to make the area to be cropped bigger, but remember that means that the image will be bigger on your page. When you\u2019re finished, click&nbsp;<strong>Crop Image.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_5.png?resize=1024%2C475&#038;ssl=1\" alt=\"\" class=\"wp-image-223\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_5.png?resize=1024%2C475&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_5.png?resize=300%2C139&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_5.png?resize=768%2C356&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_5.png?w=1202&amp;ssl=1 1202w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>5. If you upload multiple images, you can choose between these on this same page. In addition some themes allow you to  choose\u00a0<strong>Randomize uploaded headers<\/strong>\u00a0as an option. This will rotate all of your header images at random so that each time someone visits your site a different image will appear.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"500\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_6.png?resize=292%2C500&#038;ssl=1\" alt=\"\" class=\"wp-image-224\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_6.png?w=292&amp;ssl=1 292w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_6.png?resize=175%2C300&amp;ssl=1 175w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/figure>\n\n\n\n<p>6. When you\u2019ve decided on your new header image, click&nbsp;<strong>Publish&nbsp;at the top of the left-hand menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"571\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_7.png?resize=293%2C571&#038;ssl=1\" alt=\"\" class=\"wp-image-225\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_7.png?w=293&amp;ssl=1 293w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/03\/changeheader_7.png?resize=154%2C300&amp;ssl=1 154w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>This article is adapted from&nbsp;<a href=\"https:\/\/openlab.citytech.cuny.edu\/blog\/help\/openlab-help\/\">City Tech OpenLab Help<\/a>, under a&nbsp;<a href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">CC BY-NC-SA license<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Changing your site\u2019s header image Changing your site\u2019s header image is a quick and easy way to customize your site. A header image refers to the image that appears at the top of every page in many&nbsp;themes&nbsp;(see example below). Depending on your theme, however, the header image will appear differently. 1. To change your site\u2019s [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[30],"tags":[],"class_list":["post-218","post","type-post","status-publish","format-standard","hentry","category-build-a-site"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/comments?post=218"}],"version-history":[{"count":3,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/218\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/media?parent=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/tags?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}