Best full screen images for backgrounds

byTechniSmart

1.6K followers

Updated 8 years ago

LOOKING FOR EYE-POPPING BACKGROUNDS?

Full width, fluid responsive, background images have been all the rage lately, and with the right site, they can look stunning, highly professional and ready in no time. Just take a look at the Paypal site...

But how do you get the right size background image to span the background regardless of the display or device used? It does depend on the theme developer to some degree, but you can just search for responsive in your search filter when looking for themes in the dashboard. The more technical answer is, the theme needs to be written in HTML5 and use CSS3 to be truly mobile responsive.

I use a 1920 x 1080 header with a wide-screen ratio of 16:9 or 1.777:1.

I get PM'd a lot to ask what theme I use, that's no secret, it's...

*Sydney theme by http://aThemes.com

Here is the front page of the TechniSmart.com site (feel free to leave post related comment and I will of course reciprocate) I recommend you change out the defualt headers as the theme is being downloaded 2,000+ per day, so it's easy for someone else's site to look like yours. Better still, shoot your own header as I did.

* I am using a Child Theme with Themify plugi. This way you won't lose changes when the developer updates the theme, which is very often. A great tutorial on this is from my awesome friend Angel. https://my.wealthyaffiliate.com/training/how-to-cr...

BUT, I digress...here is my site with the sliders:

So if you are like me and want to invade every inch of real estate on every device, and have your page pop at the visitor when it loads, then maybe this look is right for you.

Here are some other Desktop and Notebook screen resolutions (in pixels) you can match to your header images:

1366 x 768

1280 x 800

1920 x 1080

768 x 1024

1024 x 768

1440 x 900

Of course, you don't need all this if you are going to use a mobile responsive theme (which I recommend) Just take a look at your Google Analytics Screen resolutions in Mobile under Screen Resolution and you will see mobile devices are taking over. (at least in my niche, the User Experience [UX] is changing).

For more information about screen resolutions on the latest mobile devices go to http://mobiphonespec.com/cellphone-screen-resoluti...

Go to http://.iores.com for all your Apple iOS devices including Retina displays

HOW DO I OPTIMIZE MY IMAGES?

Just because the header images are full screen and may have multipleslider images, does not mean they have to be heavy. My friend @Jvranjes made a fantastic tutorial on this, so there is no sense reinventing the wheel: https://my.wealthyaffiliate.com/training/website-i...

Thanks for reading, and I hope this post helps you soar to the sky with success. if you enjoyed the post...

with a LIKE or Comment :)

See you at the Top!

--Michael

PS: I plan to move to Genesis Framework next month, so I will have even more granular control over the look and feel, while maintaining the full width.