<\/p>\n
<\/p>\n\n\nBackground Image Sizes Explained<\/h1>\nDocs<\/a> \u00bb General<\/a> \u00bb Background Image Sizes Explained<\/strong><\/p>\n<\/div>\n<\/header>\n#comment><\/p>\n\n\nWe have provide best possible CSS options that are possible for background images.<\/h2>\n<\/div>\nLet us explain how do they work \u2013<\/h5>\n<\/div>\n<\/div>\n <\/p>\n<\/a><\/p>\n\n\n\n\nContain \u2013<\/h5>\n100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen \/ which device you are on. (The preference is to show 100% image \u2013 the remaining area of row may have white space)<\/li>\n\nCover \u2013<\/h5>\nImage will cover 100% area of the row and the rest portion will not be displayed.(Will cover the width & height \u2013 both; of the row. This means \u2013 some portion of the image can go off)<\/li>\n\nInitial \u2013<\/h5>\nImage will be displayed as it is. It won\u2019t size itself depending on width of the screen.<\/li>\n<\/ol>\nContain & Cover as explained above are responsive background images. You will need to choose depending on your preference \u2013 whether to show full image and let row have white space OR to cover complete area of the row and it\u2019s okay if image goes off as it needs to.<\/p>\nYouTube tutorial that explains this.<\/div>\nFinally \u2013 If you ask for our advise \u2013<\/h5>\n\nUser should go with Cover background type whenever possible as it always covers the complete row area on all screens sizes. Since you are implementing the background image, the preference should be given to content & not to the background. The background image is intended for usage in decorating the sections \u2013 not to display important information in them that must be visible.<\/p>\nIf you choose \u201cContain\u201d \u2013 the image wouldn\u2019t be on complete content (elements) section that\u2019s inside the row. And it\u2019s important to remember that height of the row increases on smaller screens.<\/p>\nIn either case, ALWAYS keep \u201cBackground Image Repeat\u201d option to \u201cRepeat\u201d \u2013 as it will act as fallback & cover the row area & background image will be behind content \/ elements. If your background image can not be repeated for some reason, make sure that image is as large as possible (ex \u2013 2220px X 1380px +)<\/p>\n<\/div>\n<\/a>We hope this clarifies.<\/p>\nAll the best!<\/p>\n<\/div>\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Background Image Sizes Explained Docs \u00bb General \u00bb Background Image Sizes Explained #comment> We have provide best possible CSS options that are possible for background images. Let us explain how do they work \u2013 Contain \u2013 100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen…<\/p>\n","protected":false},"author":2,"featured_media":5706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5591"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5706"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Docs<\/a> \u00bb General<\/a> \u00bb Background Image Sizes Explained<\/strong><\/p>\n<\/div>\n<\/header>\n#comment><\/p>\n\n\nWe have provide best possible CSS options that are possible for background images.<\/h2>\n<\/div>\nLet us explain how do they work \u2013<\/h5>\n<\/div>\n<\/div>\n <\/p>\n<\/a><\/p>\n\n\n\n\nContain \u2013<\/h5>\n100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen \/ which device you are on. (The preference is to show 100% image \u2013 the remaining area of row may have white space)<\/li>\n\nCover \u2013<\/h5>\nImage will cover 100% area of the row and the rest portion will not be displayed.(Will cover the width & height \u2013 both; of the row. This means \u2013 some portion of the image can go off)<\/li>\n\nInitial \u2013<\/h5>\nImage will be displayed as it is. It won\u2019t size itself depending on width of the screen.<\/li>\n<\/ol>\nContain & Cover as explained above are responsive background images. You will need to choose depending on your preference \u2013 whether to show full image and let row have white space OR to cover complete area of the row and it\u2019s okay if image goes off as it needs to.<\/p>\nYouTube tutorial that explains this.<\/div>\nFinally \u2013 If you ask for our advise \u2013<\/h5>\n\nUser should go with Cover background type whenever possible as it always covers the complete row area on all screens sizes. Since you are implementing the background image, the preference should be given to content & not to the background. The background image is intended for usage in decorating the sections \u2013 not to display important information in them that must be visible.<\/p>\nIf you choose \u201cContain\u201d \u2013 the image wouldn\u2019t be on complete content (elements) section that\u2019s inside the row. And it\u2019s important to remember that height of the row increases on smaller screens.<\/p>\nIn either case, ALWAYS keep \u201cBackground Image Repeat\u201d option to \u201cRepeat\u201d \u2013 as it will act as fallback & cover the row area & background image will be behind content \/ elements. If your background image can not be repeated for some reason, make sure that image is as large as possible (ex \u2013 2220px X 1380px +)<\/p>\n<\/div>\n<\/a>We hope this clarifies.<\/p>\nAll the best!<\/p>\n<\/div>\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Background Image Sizes Explained Docs \u00bb General \u00bb Background Image Sizes Explained #comment> We have provide best possible CSS options that are possible for background images. Let us explain how do they work \u2013 Contain \u2013 100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen…<\/p>\n","protected":false},"author":2,"featured_media":5706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5591"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5706"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
#comment><\/p>\n
<\/a><\/p>\n\n\n\n\nContain \u2013<\/h5>\n100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen \/ which device you are on. (The preference is to show 100% image \u2013 the remaining area of row may have white space)<\/li>\n\nCover \u2013<\/h5>\nImage will cover 100% area of the row and the rest portion will not be displayed.(Will cover the width & height \u2013 both; of the row. This means \u2013 some portion of the image can go off)<\/li>\n\nInitial \u2013<\/h5>\nImage will be displayed as it is. It won\u2019t size itself depending on width of the screen.<\/li>\n<\/ol>\nContain & Cover as explained above are responsive background images. You will need to choose depending on your preference \u2013 whether to show full image and let row have white space OR to cover complete area of the row and it\u2019s okay if image goes off as it needs to.<\/p>\nYouTube tutorial that explains this.<\/div>\nFinally \u2013 If you ask for our advise \u2013<\/h5>\n\nUser should go with Cover background type whenever possible as it always covers the complete row area on all screens sizes. Since you are implementing the background image, the preference should be given to content & not to the background. The background image is intended for usage in decorating the sections \u2013 not to display important information in them that must be visible.<\/p>\nIf you choose \u201cContain\u201d \u2013 the image wouldn\u2019t be on complete content (elements) section that\u2019s inside the row. And it\u2019s important to remember that height of the row increases on smaller screens.<\/p>\nIn either case, ALWAYS keep \u201cBackground Image Repeat\u201d option to \u201cRepeat\u201d \u2013 as it will act as fallback & cover the row area & background image will be behind content \/ elements. If your background image can not be repeated for some reason, make sure that image is as large as possible (ex \u2013 2220px X 1380px +)<\/p>\n<\/div>\n<\/a>We hope this clarifies.<\/p>\nAll the best!<\/p>\n<\/div>\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Background Image Sizes Explained Docs \u00bb General \u00bb Background Image Sizes Explained #comment> We have provide best possible CSS options that are possible for background images. Let us explain how do they work \u2013 Contain \u2013 100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen…<\/p>\n","protected":false},"author":2,"featured_media":5706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5591"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5706"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen \/ which device you are on. (The preference is to show 100% image \u2013 the remaining area of row may have white space)<\/li>\n
Image will cover 100% area of the row and the rest portion will not be displayed.(Will cover the width & height \u2013 both; of the row. This means \u2013 some portion of the image can go off)<\/li>\n
Image will be displayed as it is. It won\u2019t size itself depending on width of the screen.<\/li>\n<\/ol>\n
Contain & Cover as explained above are responsive background images. You will need to choose depending on your preference \u2013 whether to show full image and let row have white space OR to cover complete area of the row and it\u2019s okay if image goes off as it needs to.<\/p>\n
User should go with Cover background type whenever possible as it always covers the complete row area on all screens sizes. Since you are implementing the background image, the preference should be given to content & not to the background. The background image is intended for usage in decorating the sections \u2013 not to display important information in them that must be visible.<\/p>\n
If you choose \u201cContain\u201d \u2013 the image wouldn\u2019t be on complete content (elements) section that\u2019s inside the row. And it\u2019s important to remember that height of the row increases on smaller screens.<\/p>\n
In either case, ALWAYS keep \u201cBackground Image Repeat\u201d option to \u201cRepeat\u201d \u2013 as it will act as fallback & cover the row area & background image will be behind content \/ elements. If your background image can not be repeated for some reason, make sure that image is as large as possible (ex \u2013 2220px X 1380px +)<\/p>\n<\/div>\n
<\/a>We hope this clarifies.<\/p>\nAll the best!<\/p>\n<\/div>\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Background Image Sizes Explained Docs \u00bb General \u00bb Background Image Sizes Explained #comment> We have provide best possible CSS options that are possible for background images. Let us explain how do they work \u2013 Contain \u2013 100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen…<\/p>\n","protected":false},"author":2,"featured_media":5706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5591"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5706"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
All the best!<\/p>\n<\/div>\n
<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Background Image Sizes Explained Docs \u00bb General \u00bb Background Image Sizes Explained #comment> We have provide best possible CSS options that are possible for background images. Let us explain how do they work \u2013 Contain \u2013 100% Images will always be in the row, doesn\u2019t matter what\u2019s the width of your screen…<\/p>\n","protected":false},"author":2,"featured_media":5706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[42,41],"tags":[],"class_list":["post-5591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase-ultimate-add-ons","category-ultimate-add-ons","category-42","category-41","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=5591"}],"version-history":[{"count":5,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/5591\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5706"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=5591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=5591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=5591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/BgyoLnZQ44-3000x3000-1024x653-1.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/Responsive-Background-Objects.png\")
<\/a>We hope this clarifies.<\/p>\n