{"id":890,"date":"2013-08-20T21:02:07","date_gmt":"2013-08-20T09:02:07","guid":{"rendered":"http:\/\/www.zoyinc.com\/?p=890"},"modified":"2013-09-29T19:47:36","modified_gmt":"2013-09-29T06:47:36","slug":"transparent-header-on-image-background","status":"publish","type":"post","link":"http:\/\/www.zoyinc.com\/?p=890","title":{"rendered":"Transparent header on image background"},"content":{"rendered":"<p>What I am talking about is the site logo at the top of all pages, in our case the word &#8220;ZOYINC&#8221; at the top of this site;<\/p>\n<p><a  href=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1.jpg\" class=\"thickbox no_icon\" title=\"Wordpress Transparent Banner\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1481\" alt=\"Wordpress Transparent Banner\" src=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1.jpg\" width=\"560\" height=\"143\" srcset=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1.jpg 700w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1-150x38.jpg 150w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1-300x76.jpg 300w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner1-500x127.jpg 500w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a>I struggled to get this working with Weaver II 1.2.7 theme with WordPress 3.5.0. In my case I have the header as &#8220;ZoyincTxtTransparent2.png&#8221; which looks like:<\/p>\n<p style=\"text-align: left;\"><a  href=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2.jpg\" class=\"thickbox no_icon\" title=\"WordpressTransparent Banner PNG\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1482\" alt=\"WordpressTransparent Banner PNG\" src=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2.jpg\" width=\"525\" height=\"72\" srcset=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2.jpg 750w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2-150x20.jpg 150w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2-300x41.jpg 300w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner2-500x68.jpg 500w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/a>Firstly you need to set the header using the default WordPress area:<\/p>\n<p style=\"text-align: left;\"><a  href=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4.jpg\" class=\"thickbox no_icon\" title=\"WordPress Header Setting\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1486\" alt=\"WordPress Header Setting\" src=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4.jpg\" width=\"464\" height=\"379\" srcset=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4.jpg 580w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4-150x122.jpg 150w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4-300x245.jpg 300w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/08\/WordpressTransparentBanner4-367x300.jpg 367w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/a>After that go into the Weaver settings and look in:<\/p>\n<p style=\"text-align: left; padding-left: 30px;\">Dashboard | Appearance | Weaver II Pro Admin | Main Options | General Appearance<\/p>\n<p style=\"text-align: left;\">and then look for &#8220;Wrapper Page BG&#8221;<\/p>\n<p style=\"text-align: left;\"><a  href=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1.jpg\" class=\"thickbox no_icon\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-891\" alt=\"\" src=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1.jpg\" width=\"610\" height=\"344\" srcset=\"http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1.jpg 762w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1-150x84.jpg 150w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1-300x169.jpg 300w, http:\/\/www.zoyinc.com\/wp-content\/uploads\/2013\/02\/WPTransparentHeader1-500x282.jpg 500w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a>You will need to type &#8220;transparent&#8221; into the textbox.<\/p>\n<p style=\"text-align: left;\">Obviously your image needs to be transparent in the first page for this to work, so a PNG or GIF would be natural choices.<\/p>\n<p>Note &#8220;#wrapper&#8221; is the CSS element for the header, so this is the bit that needs the attention.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What I am talking about is the site logo at the top of all pages, in our case the word &#8220;ZOYINC&#8221; at the top of this site; I struggled to get this working with Weaver II 1.2.7 theme with WordPress 3.5.0. In my case I have the header as &#8220;ZoyincTxtTransparent2.png&#8221; which looks like: Firstly you [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":902,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[169,95,44,297],"class_list":["post-890","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-weaverii","tag-header","tag-transparent","tag-weaver","tag-wordpress"],"_links":{"self":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=890"}],"version-history":[{"count":8,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/890\/revisions"}],"predecessor-version":[{"id":1488,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/890\/revisions\/1488"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/media\/902"}],"wp:attachment":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=890"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}