How I Size My Header Images
- Be A Hero: How To Use Full Screen Images On Your Website Screen
- Be A Hero: How To Use Full Screen Images On Your Website Browser
- Be A Hero: How To Use Full Screen Images On Your Website Page
- Be A Hero: How To Use Full Screen Images On Your Website Free
Create a hero animation using Flutter’s Hero widget. Fly the hero from one screen to another. Animate the transformation of a hero’s shape from circular to rectangular while flying it from one screen to another. The Hero widget in Flutter implements a style of animation commonly known as shared element transitions or shared element animations. Here are just a few reasons to consider why to put hero images/full page sliders on your website: They catch attention. New visitors of your site only have 0.05 seconds to form an opinion about your website and you want your first impression to be a good one. They add a personal touch. Use a hero image to show off products or services (or both. Layout: Full-bleed hero transitions on scroll into split-screen project “cards.” Another portfolio site that’s really caught my eye lately is book designer Lauren Wickware's. The multi-dimensional scrolling creates a surprisingly smooth and engaging experience that flirts with scrolljacking without ever feeling forced or restrictive.
If you're like me you've run into this too many times to count.
Your web page needs a new image for the hero section or top part of your page. You want this image to be large enough for any size screen but not so large that it will significantly slow down the load time on your page. You don't want it too tall either.
You've done this a bunch of times but each time you open up your design tool to create your hero image, you can never remember what size that hero image should be.
You know the first thing is to get the dimensions of the image right.
Your go-to sizing guide for hero background images
If your image is going to be header/hero background image you'll want it to be long and not too tall. I make my header images 1600 x 500px.
Size those full page background images correctly too
If you're creating a full page background image you'll want these images to be a bit taller. I make these images 1600 x 1000px or sometimes 1920 x 1200px. I usually do both sizes and then compress them. If the larger image compresses well and isn't too large (still under 400kb) I go with the 1920 x 1200px sized image.
Don't forget how an image might look on mobile
You will want to look at your image on both desktop and mobile. These image sizes typically look best on desktop. So, take a look at them on smaller screens to make sure it still looks good.
If it looks good on both jump down to the next section.
Be A Hero: How To Use Full Screen Images On Your Website Screen
However, if it looks good on desktop but is a little too small on mobile you'll want to create a specific image for mobile.
When this is the case I switch out the hero image (using a media query) so that on mobile it shows the mobile image and on larger screens it shows the regular hero image. I typically make my mobile images 800 x 1200px.
You can swap out your hero and mobile images in your CSS like this:
Description
Simple Full Screen Background Image will allow you to easily upload and set a full screen image as the background of your website. Images will be automatically scaled with the browser, so regardless of the browser size, the image will always fill the screen, even as the browser is resized live.
Once activated, go to Appearance > Fullscreen BG Image. From here click Choose Image, then either upload from your computer or choose one from the media library. Once you have chosen your image, select the size you wish to insert and click Insert Into Post. A preview of your image will appear below. Now click Save Options
and view your site. The image should now be applied as a full screen background image.
Go Pro!
A greatly enhanced Pro version is available! Features of the pro version include:
Be A Hero: How To Use Full Screen Images On Your Website Browser
- Unlimited background images
- Post / page-specific background images
- Multiple images with fade transitions on pages
Learn more about the Pro version here.
Installation
- Upload the ‘simple-full-screen-background’ folder to the
/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- Navigate to Appearance > Fullscreen BG Image and upload your background image