User:Chlod/Full-width image

This help page is a how-to guide. It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus.

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.