{"id":900,"date":"2022-08-11T07:05:58","date_gmt":"2022-08-11T07:05:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/11\/6462732-hostinger-website-builder-how-to-change-the-section-background\/"},"modified":"2025-08-28T13:39:02","modified_gmt":"2025-08-28T13:39:02","slug":"6462732-hostinger-website-builder-how-to-change-the-section-background","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6462732-hostinger-website-builder-how-to-change-the-section-background\/","title":{"rendered":"Hostinger Website Builder: How to Change the Section Background"},"content":{"rendered":"<p class=\"no-margin\">If you use <b>Hostinger Website Builder <\/b>and want to change the section background, follow the steps below &#128071;<\/p><p class=\"no-margin\">Within the builder, click on the section you want to edit and select <b>Edit section<\/b>:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/4fed7cf8-20aa-409d-9b5d-214cad3931a8.jpg\" alt=\"The section settings in Hostinger Website Builder\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">If you wish to use an <b>image background<\/b>, you may also click on<b> <a class=\"intercom-content-link\" href=\"\/support\/8670037-website-builder-ai-image-generator\" target=\"_blank\" rel=\"noopener\">Generate image<\/a><\/b> right away &#128161;<\/p>\n<\/div><p class=\"no-margin\">Choose between color or image:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/798d4dad-ef3d-40f8-be5a-0d81d5fda313.jpg\" alt=\"The section settings in Hostinger Website Builder\" width=\"400\"><\/div><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Color background<\/b><\/p>\n<\/td>\n<td style=\"background-color: #e3e7fa80\">\n<p class=\"intercom-align-center no-margin\"><b>Image background<\/b><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p class=\"no-margin\">Click on the color bubble and set any color you like<\/p>\n<\/td>\n<td>\n<p class=\"no-margin\">Click on <b>Add image <\/b>or <b>Replace image<\/b> and select an image from the media library, upload your own image, or browse the free image gallery<\/p>\n<p class=\"no-margin\">After setting a background image, you can also:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Change the <b>overlay opacity<\/b> until you&rsquo;re happy with how dark or light your section&rsquo;s background is<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Enable <b>fixed background, <\/b>which means that the background image will remain fixed (won&rsquo;t scroll)<i> <\/i>when scrolling the page<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><p class=\"no-margin\">With background color, you can also configure it to be gradient as shown below:<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/08\/gradientbackgroundcolor.gif\"><\/div><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">It is<b> not recommended to use GIFs<\/b> for a section background because they may affect your <b>website speed <\/b>&#128161;<\/p>\n<p class=\"no-margin\">If you want to add video background to sections, you would need to add videos in GIF format inside your editor, more details <b><a class=\"intercom-content-link\" href=\"\/support\/10420044-website-builder-how-to-add-a-video-background-to-a-section\" target=\"_blank\" rel=\"noopener\">here<\/a><\/b>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to change the background of a website section using Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[279],"tags":[],"class_list":["post-900","post","type-post","status-publish","format-standard","hentry","category-website-sections"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6462732-hostinger-website-builder-how-to-change-the-section-background\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6462732-hostinger-creador-de-sitios-web-como-cambiar-el-fondo-de-una-seccion\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6462732-hostinger-createur-de-sites-web-comment-modifier-l-arriere-plan-des-sections\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6462732-hostinger-svetainiu-kurimo-irankis-skilties-fonas\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6462732-hostinger-criador-de-sites-como-mudar-o-plano-de-fundo-de-uma-secao\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"predecessor-version":[{"id":5583,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/900\/revisions\/5583"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}