{"id":367,"date":"2012-05-30T16:30:59","date_gmt":"2012-05-30T16:30:59","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=367"},"modified":"2022-07-19T08:34:30","modified_gmt":"2022-07-19T07:34:30","slug":"multiple-background-images","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/background\/multiple-background-images","title":{"rendered":"Multiple background images"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>body {\n\tbackground-image: url(\/images\/background_header.png), url(\/images\/background_footer.png);\n\tbackground-position: top left, bottom left;\n\tbackground-repeat: repeat-x, no-repeat;\n\tbackground-size: 1px 196px, 1px 108px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Multiple horizontal background images with transparent png&#8217;s<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.my_header_menubar_wrapper {\n\theight: 44px;\n\tbackground-image: url(\/images\/header_menubar_left.png), url(\/images\/header_menubar_right.png);\n\tbackground-position: top left, top right;\n\tbackground-repeat: no-repeat, no-repeat;\n\tbackground-size: 20px 44px, 21px 44px;\n\tposition: relative;\n\tz-index: 2;\n}\n\n.my_header_menubar_wrapper:before {\n    content: '';\n    position: absolute;\n    z-index: -1;\t\t\t\/* push it to the background *\/\n    left: 20px;\t\t\t\t\/* Height of the left image *\/\n    top: 0;\n    right: 21px;\t\t\t\/* Height of the right image *\/\n    bottom: 0;\n    background: url(\/images\/header_menubar_middle.png) left top repeat-x;\n\t\tbackground-size: 1px 44px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Multiple vertical background images with transparent png&#8217;s<\/h4>\n\n\n\n<p>Doing this won&#8217;t work because the repeat-y will cause the middle image to fill the whole height, no matter where it is positioned initially:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.column_right_background {\n\tbackground-image: url(..\/background_box_top.png) left top no-repeat,\n\turl(..\/background_box_bottom.png) left bottom no-repeat,\n\turl(..\/background_box_mid.png) 0px 206px repeat-y;\n\twidth: 712px;\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Solution<\/h5>\n\n\n\n<p>A nice solution is to push the repeating background into a pseudo element positioned off of the container:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.column_right_background {\n\tbackground: url(..\/background_box_top.png) left top no-repeat,\n\turl(..\/lgimages\/background_box_bottom.png) left bottom no-repeat;\n\twidth: 712px;\n\tposition: relative;\n\tz-index: 2;\n}\n\n.column_right_background:before {\n    content: '';\n    position: absolute;\n    z-index: -1;\t\t\t\/* push it to the background *\/\n    top: 206px;\t\t\t\t\/* Height of the top image *\/\n    right: 0;\n    bottom: 25px;\t\t\t\/* Height of the bottom image *\/\n    left: 0;\n    background: url(..\/background_box_mid.png) left top repeat-y;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Multiple horizontal background images with transparent png&#8217;s Multiple vertical background images with transparent png&#8217;s Doing this won&#8217;t work because the repeat-y will cause the middle image to fill the whole height, no matter where it is positioned initially: Solution A nice solution is to push the repeating background into a pseudo element positioned off of [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[200],"tags":[],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-background"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":9,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":4372,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/367\/revisions\/4372"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}