{"id":358917,"date":"2022-01-06T07:58:55","date_gmt":"2022-01-06T15:58:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=358917"},"modified":"2022-01-09T18:11:59","modified_gmt":"2022-01-10T02:11:59","slug":"fixed-background-effect","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fixed-background-effect\/","title":{"rendered":"The Search For a Fixed Background Effect With Inline Images"},"content":{"rendered":"\n<p>I was working on a client project a few days ago and wanted to create a certain effect on an <code>&lt;img&gt;<\/code>. See, background images can do the effect I was looking for somewhat easily with <code>background-attachment: fixed;<\/code>. With that in place, a background image stays in place\u2014even when the page scrolls. It isn\u2019t used all that often, so the effect can look unusual and striking, especially when used sparingly.<\/p>\n\n\n\n<!--more-->\n\n\n<h2 class=\"simpletoc-title \">Table of Contents<\/h2><ul class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#why-use-ltimggt-instead-of-backgroundimage\">Why use &lt;img&gt; instead of background-image?<\/a><\/li><li>\n<a  href=\"#1-using-css-backgroundimage\">1. Using CSS background-image<\/a><\/li><li>\n<a  href=\"#2-using-the-clippath-trick-on-an-inline-image\">2. Using the clip-path trick on an inline image<\/a><\/li><li>\n<a  href=\"#is-there-something-better\">Is there something better?<\/a><\/li><\/ul>\n\n\n<p>It took me some time to figure out how to achieve the same effect only with an inline image, rather than a CSS background image. This is a video of the effect in action:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='313' src='https:\/\/videopress.com\/embed\/2ciWn57o?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p class=\"is-style-explanation\">The exact code for the above demo is <a href=\"https:\/\/github.com\/lazaralex98\/nate-davis\/blob\/main\/components\/HomePage\/BenefitsWithAttachementEffect.jsx\" rel=\"noopener\">available in this Git repo<\/a>. Just note that it\u2019s a Next.js project. We\u2019ll get to a CodePen example with raw HTML in a bit.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-use-ltimggt-instead-of-backgroundimage\">Why use <code>&lt;img&gt;<\/code> instead of <code>background-image<\/code>?<\/h3>\n\n\n<p>The are a number of reasons I wanted this for my project:<\/p>\n\n\n\n<ul><li>It\u2019s easier to lazy load (e.g. <code>&lt;img loading=\"lazy\"\u2026 &gt;<\/code>.<\/li><li>It provides better SEO (not to mention accessibility), thanks to <code>alt<\/code> text.<\/li><li>It\u2019s possible to <a href=\"https:\/\/css-tricks.com\/a-guide-to-the-responsive-images-syntax-in-html\/#using-srcset\" data-type=\"URL\" data-id=\"https:\/\/css-tricks.com\/a-guide-to-the-responsive-images-syntax-in-html\/#using-srcset\">use <code>srcset<\/code>\/<code>sizes<\/code><\/a> to improve the loading performance.<\/li><li>It\u2019s possible to <a href=\"https:\/\/css-tricks.com\/a-guide-to-the-responsive-images-syntax-in-html\/#using-picture\">use the <code>&lt;picture&gt;<\/code> tag<\/a> to pick the best image size and format for the user\u2019s browser.<\/li><li>It allows users to download save the image (without resorting to DevTools).<\/li><\/ul>\n\n\n\n<p>Overall, it\u2019s better to use the image tag where you can, particularly if the image could be considered content and not decoration. So, I wound up landing on a technique that uses CSS <code>clip-path<\/code>. We\u2019ll get to that in a moment, right after we first look at the <code>background-image<\/code> method for a nice side-by-side comparison of both approaches.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"1-using-css-backgroundimage\">1. Using CSS <code>background-image<\/code><\/h3>\n\n\n<p>This is the \u201coriginal\u201d way to pull off a fixed scrolling effect. Here\u2019s the CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hero-section {\n  background-image: url(\"nice_bg_image.jpg\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center; \n  background-attachment: fixed;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLoWoeR\" src=\"\/\/codepen.io\/anon\/embed\/yLoWoeR?height=550&amp;theme-id=1&amp;slug-hash=yLoWoeR&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLoWoeR\" title=\"CodePen Embed yLoWoeR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But as we just saw, this approach isn\u2019t ideal for some situations because it relies on the CSS <code>background-image<\/code> property to call and load the image. That means the image is technically not considered content\u2014and thus unrecognized by screen readers. If we\u2019re working with an image that is part of the content, then we really ought to make it accessible so it is consumed like content rather than decoration.<\/p>\n\n\n\n<p>Otherwise, this technique works well, but only <em>if the image spans the whole width of the viewport and\/or is centered<\/em>. If you have an image on the right or left side of the page like the example, you\u2019ll run into a whole number of positioning issues because <code>background-position<\/code> is relative to the center of the viewport.<\/p>\n\n\n\n<p>Fixing it requires a few media queries to make sure it is positioned properly on all devices.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"2-using-the-clippath-trick-on-an-inline-image\">2. Using the <code>clip-path<\/code> trick on an inline image<\/h3>\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/33550450\/how-to-use-css-background-attachment-in-img-tag\/68466386#68466386\" rel=\"noopener\">Someone on StackOverflow<\/a> shared this <code>clip-path<\/code> trick and it gets the job done well. You also get to keep using the<code>&lt;img&gt;<\/code> tag, which, as we covered above, might be advantageous in some circumstances, especially where an image is part of the content rather than pure decoration.<\/p>\n\n\n\n<p>Here\u2019s the trick:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4,8,9\"><code markup=\"tt\">.image-container {\n  position: relative;\n  height: 200px;\n  clip-path: inset(0);\n}\n\n.image {\n  object-fit: cover;\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}<\/code><\/pre>\n\n\n\n<p>Check it out in action:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWvYVwG\" src=\"\/\/codepen.io\/anon\/embed\/NWvYVwG?height=450&amp;theme-id=1&amp;slug-hash=NWvYVwG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWvYVwG\" title=\"CodePen Embed NWvYVwG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, before we rush out and plaster this snippet everywhere, it has its own set of downsides. For example, the code feels <em>a bit lengthy<\/em> to me for such a simple effect. But, even more important is the fact that working with <code>clip-path<\/code> comes with some implications as well. For one, I can\u2019t just slap a <code>border-radius: 10px;<\/code> in there like I did in the earlier example to round the image\u2019s corners. That won\u2019t work\u2014it requires making rounded corners from the clipping path itself.<\/p>\n\n\n\n<p>Another example: I don\u2019t know how to position the image <em>within<\/em> the <code>clip-path<\/code>. Again, this might be a matter of knowing <code>clip-path<\/code> really well and drawing it where you need to, or cropping the image itself ahead of time as needed.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"is-there-something-better\">Is there something better?<\/h3>\n\n\n<p>Personally, I gave up on using the fixed scrolling effect on inline images and am back to using a CSS background image\u2014which I know is kind of limiting.<\/p>\n\n\n\n<p>Have you ever tried pulling this off, particularly with an inline image, and managed it well? I\u2019d love to hear!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was working on a client project a few days ago and wanted to create a certain effect on an &lt;img&gt;. See, background images can do the effect I was looking for somewhat easily with background-attachment: fixed;. With that in place, a background image stays in place\u2014even when the page scrolls. It isn\u2019t used all [&hellip;]<\/p>\n","protected":false},"author":287556,"featured_media":358934,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The Search For a Fixed Background Effect With Inline Images by @alexVlazar","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[827,1220,826,585],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/fixed-background.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":1820,"url":"https:\/\/css-tricks.com\/blurry-background-effect\/","url_meta":{"origin":358917,"position":0},"title":"Blurry Background Effect","date":"December 22, 2008","format":false,"excerpt":"When setting a background image on a page element with CSS, you can control its position with \"background-position\", but an often-forgotten trick is that you can control its position behavior with \"background-attachment\". Utilizing two images, we can pull off a pretty simple and fun CSS trick I'm calling the \"blurry\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/bbe.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":167745,"url":"https:\/\/css-tricks.com\/frosting-glass-css-filters\/","url_meta":{"origin":358917,"position":1},"title":"Frosting Glass with CSS Filters","date":"April 7, 2014","format":false,"excerpt":"While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190610,"url":"https:\/\/css-tricks.com\/design-considerations-text-images\/","url_meta":{"origin":358917,"position":2},"title":"Design Considerations: Text on Images","date":"December 12, 2014","format":false,"excerpt":"I enjoyed Erik D. Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically. Tinting\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350201,"url":"https:\/\/css-tricks.com\/the-fixed-background-attachment-hack\/","url_meta":{"origin":358917,"position":3},"title":"The Fixed Background Attachment Hack","date":"August 27, 2021","format":false,"excerpt":"What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/background-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333608,"url":"https:\/\/css-tricks.com\/going-from-solid-to-knockout-text-on-scroll\/","url_meta":{"origin":358917,"position":4},"title":"Going From Solid to Knockout Text on Scroll","date":"February 3, 2021","format":false,"excerpt":"Here\u2019s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol\u2019 HTML and CSS! This effect is created by rendering two containers with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/solid-knockout-text.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367270,"url":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","url_meta":{"origin":358917,"position":5},"title":"Scroll Shadows? Pure CSS Parallax? Game Back On.","date":"July 29, 2022","format":false,"excerpt":"Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. CodePen\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/fixed-background.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358917"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/287556"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=358917"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358917\/revisions"}],"predecessor-version":[{"id":360944,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/358917\/revisions\/360944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/358934"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=358917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=358917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=358917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}