User:Chlod/Full-width image

This is an easy method to add full-width images to userpages that stretch to the maximum width of any screen, be it in mobile or desktop view. For an example, see User:Chlod (or User:Chlod/Gallery).

1. Create a page in the TemplateStyles sandbox with the following content.

   You can use the following box to create the page. Replace ~~~ with your username.

   
   

   Place the following code in the CSS file, and replace the URL with the image that you want. You may use a downscaled version in order to cut download times on large images for slow connections. If the image is not that large (less than around 4000px in width), you can simply use the original file anyway.

   /* [[w:en:User:Chlod/Full-width image]] */
   .userpage_image {
       /**
          Example: 
            /* Backlink: [[File:Burgoyne Bridge guardrails.jpg]] * /
            background-image: url("//upload.wikimedia.org/wikipedia/commons/3/34/Burgoyne_Bridge_guardrails.jpg")
       **/
       /* Backlink: [[<image name here (with File: prefix)>]] */
       background-image: url("<image link here>");
       background-size: cover;
       background-position: center;
       /* The image will take up 75% of the window height as set below. You can change this */
       /* value to a different percentage, or use "px" (pixels) instead of "vh" (viewport height). */
       height: 75vh;
       /* If you don't want the image to take up 75% of the page height on portrait phones, uncomment the following line. */
       /* max-height: 500px */
   }
   

2. Move the newly-created CSS file to your userpage, usuallly Special:MyPage/userpage.css (where Special:MyPage is your userpage, e.g. User:Example).
3. Add the following wikitext anywhere in your userpage, where Special:MyPage/userpage.css is where you moved the CSS file.

   <templatestyles src="Special:MyPage/userpage.css"/><div class="userpage_image mw-no-invert"></div>
   

4. IMPORTANT: Since the full-width image is not clickable to show image details, you must provide attribution to the original file if the file requires attribution (such as CC BY-SA-licensed images). This must be in the form of a link to the original image's page on Commons, preferably with the name of the image author. For further instructions, see Commons:Credit line.
   • If the image does not require attribution or is in the public domain (and you better be sure that it is), then you can skip this part.
5.  Done! You should now have a full-width image on your userpage. If you'd like to add content in front of the full-width image, simply add content between the <div> tags in Step 3. You may also want to watchlist this page for updates.

FAQ

• Q: Why is the page first created in a TemplateStyles sandbox subpage?

  A: The CSS file needs to be the sanitized-css content model, which is only available for CSS files created in the Template namespace. CSS files created in userspace take on the css content model, which can't be used in .

• Q: Can I use images from other websites or locally-uploaded images on this wiki?

  A: No, this is blocked by TemplateStyles. You can only use images from Wikimedia Commons. This is to avoid possible copyright issues.

• Q: Does this work for SVGs?

  A: It should.

• Q: Can I modify someone else's userpage CSS?

  A: No, you can only modify your own.

• Q: Is the link comment needed?

  A: Linking to the image with wikitext inside of a CSS comment will add your stylesheet file to the image's "Global file usage" list. Without this link, no connection will be made, and low-use files or files for deletion may not properly account for the usage on your stylesheet file.