{"id":904,"date":"2013-12-29T17:27:13","date_gmt":"2013-12-29T16:27:13","guid":{"rendered":"https:\/\/www.hutsky.cz\/blog\/?p=904"},"modified":"2013-12-29T17:27:13","modified_gmt":"2013-12-29T16:27:13","slug":"fixed-bacground-and-animation","status":"publish","type":"post","link":"https:\/\/www.hutsky.cz\/blog\/2013\/12\/fixed-bacground-and-animation\/","title":{"rendered":"Fixed background and animation"},"content":{"rendered":"<p><a href=\"https:\/\/www.hutsky.cz\/blog\/wp-content\/uploads\/dental1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-913\" title=\"dental1\" alt=\"\" src=\"https:\/\/www.hutsky.cz\/blog\/wp-content\/uploads\/dental1-300x156.png\" width=\"300\" height=\"156\" srcset=\"https:\/\/www.hutsky.cz\/blog\/wp-content\/uploads\/dental1-300x156.png 300w, https:\/\/www.hutsky.cz\/blog\/wp-content\/uploads\/dental1.png 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>I ran into a peculiar problem while designing a website for <a href=\"http:\/\/www.stomatologie-brno.cz\/\">my client<\/a>. They had professional photos taken and I liked them very much, so I decided I would use them as a fixed background that would stretch to the full width and height of the screen regardless of the website&#8217;s visitor resolution. That is done easily with CSS3:<\/p>\n<pre lang=\"css\">background-attachment: fixed; \r\nbackground-position: center center; \r\nbackground-repeat: no-repeat; \r\nbackground-size: cover;<\/pre>\n<p>However, I liked more than one of those pictures so I wanted to use more of them on top of each other and then let jQuery fade them in a loop, which can also create interesting visual effects. That is a problem however, because you can have only one background image, of course. As a workaround, I used a div that is below all the content and is stretched to the full width and height.<\/p>\n<pre lang=\"css\">.my_background_div_container {\r\n\tposition: absolute; \r\n\theight: 100% !important; \r\n\tbackground-attachment: fixed; \r\n\tbackground-position: center center; \r\n\tbackground-repeat: no-repeat; \r\n\tbackground-size: cover; \r\n\twidth: 100%;\r\n}\r\n#background_1 { \r\n\tbackground-image: url('..\/img\/bg01.jpg'); \r\n\tz-index: 9;\r\n\t}\r\n#background_2 { \r\n\tbackground-image: url('..\/img\/bg02.jpg');  \r\n\tz-index: 8;\r\n\t}\r\n#background_3 { \r\n\tbackground-image: url('..\/img\/bg03.jpg');  \r\n\tz-index: 7;\r\n\t}<\/pre>\n<p>The fixed background div works just fine as long as your content is fixed as well, ie. a small login form in the middle of the screen. But once the content extends the page and you scroll down, the background div remains at the top.<\/p>\n<p>The only way to avoid this is to use javascript to move the container div along with the user scrolling down:<\/p>\n<pre lang=\"js\">$(window).scroll(function() {\r\n    \tvar p = $(window).scrollTop();\r\n\t\t$(\"#background_1\").offset({ top: p, left: 0 });\r\n\t\t$(\"#background_2\").offset({ top: p, left: 0 });\r\n\t\t$(\"#background_3\").offset({ top: p, left: 0 });\r\n\t});<\/pre>\n<p>This solution has several drawbacks, though. First of all, it&#8217;s very resource-hungry. Second, there are some visual glitches in some browsers. It works flawlessly in FF 11, but there are lags in Chromium 18. As for IE, I didn&#8217;t even dare to have a look \ud83d\ude42<\/p>\n<p>Anyway, due to those glitches, I decided to use the fade effect only on the home page of the website, which has fixed height. For the sub pages, there is a randomly chosen image that stretches on the whole screen, but there is no fade effect. I think it is a fair compromise between visually attractive effects and usability.<\/p>\n<p>I keep the original version, which was resource hungry and had problems in some browsers, here: <a href=\"https:\/\/www.hutsky.cz\/code_examples\/post_904\/\">https:\/\/www.hutsky.cz\/code_examples\/post_904\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I ran into a peculiar problem while designing a website for my client. They had professional photos taken and I liked them very much, so I decided I would use them as a fixed background that would stretch to the &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/www.hutsky.cz\/blog\/2013\/12\/fixed-bacground-and-animation\/\"> <span class=\"screen-reader-text\">Fixed background and animation<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,22],"tags":[23,30,31,24,50,49],"class_list":["post-904","post","type-post","status-publish","format-standard","hentry","category-jquery","category-web-related","tag-browser","tag-css","tag-html","tag-javascript","tag-jquery","tag-mobile-web"],"_links":{"self":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/comments?post=904"}],"version-history":[{"count":14,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/904\/revisions"}],"predecessor-version":[{"id":940,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/posts\/904\/revisions\/940"}],"wp:attachment":[{"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/media?parent=904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/categories?post=904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hutsky.cz\/blog\/wp-json\/wp\/v2\/tags?post=904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}