{"id":4955,"date":"2009-11-18T12:00:48","date_gmt":"2009-11-18T12:00:48","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=4955"},"modified":"2009-11-18T12:00:48","modified_gmt":"2009-11-18T12:00:48","slug":"tutorial-creating-a-gradient-background-with-a-transparent-logo","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/","title":{"rendered":"Tutorial: Creating a Gradient background with a Transparent Logo"},"content":{"rendered":"

We’ve had a few requests from our reseller hosting customers wanting to know how they can incorporate their own logo into a HostPay installation that uses a gradient as a background image.<\/p>\n

I’ve created a tutorial to show you how easy it is to create your own gradient background and also seamlessly overlay your logo over the top.<\/p>\n

For this demonstration I’ll be using Adobe Fireworks to create the graphics needed, the same method can be applied using other popular graphics package including The GIMP<\/a> (Freeware), Adobe Photoshop etc, though the way an effect is achieved may vary from package to package. The final result will create two separate images, a thin 5px width gradient graphic that goes from light to dark blue and a transparent logo.<\/p>\n

Click here<\/a> to view the demo<\/p>\n

Click here to download the source files which will include the html, images and the css with full commenting.<\/p>\n

Creating a Gradient<\/p>\n

Step one: Create the Canvas<\/h4>\n

Go to: File > New and create a canvas that measures 800px (Width) x 600px (Height) and give it a white background.<\/p>\n

\"grad-step1\"<\/p>\n

Step two: Create a vector box<\/h4>\n

Draw a rectangle that measures 800px by 150px so it spans the full width of the canvas.<\/p>\n

Next, apply a vertical linear gradient to the vector so the top (lighter) colour has the value of #4E99E0 and the bottom (darker) colour has the value of #0066CC.<\/p>\n

\"grad-step2\"<\/p>\n

Step three: Exporting the gradient<\/h4>\n

We’ll be using CSS to tile the background horizontally across the header so we’ll only need a small 5px slice of the actual gradient image, this way we can save on file size and page load times.<\/p>\n

To do this create a new canvas that measures 5px (width) x 150px (height) and copy and paste the gradient into this canvas.<\/p>\n

\"grad-step3\"<\/p>\n

To export\/save this graphic, go to: File > Export Wizard > Continue > (Click “The Web”) Continue > (Click Exit if it appears) > Then on the “Format” option on the drop down click “PNG 32” > Click “Export” > then save your file as gradient.png<\/p>\n

\"grad-step4\"<\/p>\n

Note:<\/h4>\n

You can also use the slice tool to export a 5px x 150px slice, make sure you select PNG 32 within the “Optimize” window (F8)<\/p>\n

You have now created a gradient which we can use as the main background of the header.<\/p>\n

Creating a transparent logo<\/p>\n

Step one: Setting up the logo<\/h4>\n

Open your logo in a new canvas by going to File > Open > (Browse to your logo) and click “Open”. Make sure the logo is sat on a transparent background, if your logo sits on a coloured background please see the notes at the bottom of this section.<\/p>\n

Set the background colour of the canvas to the “mid” colour of the gradient, this is important as it ensures the logo blends seamlessly with the background when used on the website.<\/p>\n

\"logo-step2\"<\/p>\n

Step two: Exporting the logo<\/h4>\n

Much like the method in exporting the gradient:<\/p>\n

Go to: File > Export Wizard > Continue > (Click “The Web”) Continue > (Click Exit if it appears) > Then on the “Format” option on the drop down click “PNG 8” the set it to 256 colours then using the transparency picker click on the background (The “mid” gradient colour) of the logo within the preview window. This will then remove that colour from the logo leaving a transparent background. You may notice the edges become slightly “bitty” but that’s fine as these will not be noticeable on the website and will blend nicely with the background.<\/p>\n

\"logo-step4\"<\/p>\n

\"logo-step3\"<\/p>\n

Note:<\/h4>\n

If your logo has already got a solid colour as the background – you can remove this at the export stage when picking the colour of the index transparency. For the best result, make sure you adjust the colour of the gradient to match the background colour you removed from the logo so it blends nicely on your website.<\/p>\n

We’ll be exporting the logo using index transparency and as a PNG8 – we won’t use the Alpha transparency option as this renders the edges jagged within IE6. PNG32 will create a grey background in IE6, so it’s best to avoid that as well.<\/p>\n

Creating the website<\/p>\n

Using a few lines of XHTML and CSS i’ll show you how to create a gradient header for your website and also how to align your logo properly on top.<\/p>\n

Step one: The Structure<\/h4>\n

Below is the basic code to create the basic structure of your website & header.<\/p>\n

The #container div will contain all your website elements and can adjusted accordingly. The #header div will contain your logo and have the gradient background style applied to it.<\/p>\n

<body>
\n<div id=\"container\">
\n<div id=\"header\">
\n<p><img src=\"logo.png\" alt=\"Your Logo Name\"><\/p>
\n<\/div><\/div>
\n<\/body><\/code><\/p>\n

Step two: Styling the header<\/h4>\n

Add the following into the <head><\/code> of your document.<\/p>\n

The following code assumes your images are in the root of your website relative to your homepage\/index.html<\/p>\n

<style type=\"text\/css\">
\nbody {margin: 0; padding: 0; background: #e4e4e4;}
\n#container {width: 900px; background: #fff; height: 500px; margin: 0 auto;}
\n#header {width: 900px; height: 150px; background: #06c url(gradient.png) repeat-x top;}
\n.logo {padding: 60px 0 0 60px;}
\n<\/style><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve had a few requests from our reseller hosting customers wanting to know how they can incorporate their own logo into a HostPay installation that uses a gradient as a…<\/p>\n","protected":false},"author":2,"featured_media":8204,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,28,29],"tags":[],"class_list":{"0":"post-4955","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"category-your-business","9":"category-your-website"},"yoast_head":"\nTutorial: Creating a Gradient background with a Transparent Logo - Heart Internet<\/title>\n<meta name=\"description\" content=\"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.\" \/>\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.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Creating a Gradient background with a Transparent Logo - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2009-11-18T12:00:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Tutorial: Creating a Gradient background with a Transparent Logo\",\"datePublished\":\"2009-11-18T12:00:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\"},\"wordCount\":810,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"articleSection\":[\"Web Design\",\"Your Business\",\"Your Website\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\",\"name\":\"Tutorial: Creating a Gradient background with a Transparent Logo - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"datePublished\":\"2009-11-18T12:00:48+00:00\",\"description\":\"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"width\":1620,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Creating a Gradient background with a Transparent Logo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Creating a Gradient background with a Transparent Logo - Heart Internet","description":"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.","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.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/","og_locale":"en_GB","og_type":"article","og_title":"Tutorial: Creating a Gradient background with a Transparent Logo - Heart Internet","og_description":"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.","og_url":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2009-11-18T12:00:48+00:00","og_image":[{"width":1620,"height":720,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Tutorial: Creating a Gradient background with a Transparent Logo","datePublished":"2009-11-18T12:00:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/"},"wordCount":810,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","articleSection":["Web Design","Your Business","Your Website"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/","url":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/","name":"Tutorial: Creating a Gradient background with a Transparent Logo - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","datePublished":"2009-11-18T12:00:48+00:00","description":"Tutorial: Creating a Gradient background with a Transparent Logo - Written by the team at Heart Internet.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","width":1620,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/tutorial-creating-a-gradient-background-with-a-transparent-logo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Creating a Gradient background with a Transparent Logo"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/4955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=4955"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/4955\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8204"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=4955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=4955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=4955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}