{"id":17616,"date":"2019-07-24T21:13:45","date_gmt":"2019-07-24T13:13:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17616"},"modified":"2019-07-21T21:09:26","modified_gmt":"2019-07-21T13:09:26","slug":"oversized-background-image-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/","title":{"rendered":"Large Background Images in Web Design: Tips and Examples"},"content":{"rendered":"<p>In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through <strong>basic <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">CSS3\/CSS2 techniques<\/a><\/strong>, or by using some <strong>open source third-party jQuery plugins<\/strong>. There are no right or wrong answers, just <strong>varying levels of support in older legacy browsers<\/strong>.<\/p>\n<p>Dig through this collection of riveting development techniques and see what you can put together.<\/p>\n<h2>CSS Tricks of the Trade<\/h2>\n<p>To get us started I would like to introduce a very helpful <a href=\"https:\/\/css-tricks.com\/perfect-full-page-background-image\/\">article posted on CSS Tricks<\/a> which outlines many of these ideas. The simplest solution with the greatest level of support is through CSS techniques. I have found that the CSS3 method will work properly in most common browsers, and there are even <strong>hacks for handling older versions of Internet Explorer<\/strong>.<\/p>\n<p>Let\u2019s take a peek at the CSS3 code for placing these background images at full <strong>100% responsive width<\/strong>. I\u2019ll be using the codes from <strong>Chris Coyeir\u2019s<\/strong> article to explain how easily this can be implemented.<\/p>\n<pre>html { \r\n  background: url(https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg) no-repeat center center fixed; \r\n  -webkit-background-size: cover;\r\n  -moz-background-size: cover;\r\n  -o-background-size: cover;\r\n  background-size: cover;\r\n  -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg', sizingMethod='scale')\";\r\n  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg', sizingMethod='scale');\r\n}<\/pre>\n<ul class=\"download\">\n<li><a href=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/demo\/index.html\">Demo<\/a><\/li>\n<\/ul>\n<p>The HTML element is a much easier target than the body since we know everything is wrapped inside. Then we apply the background image with a full center position, no repeat and fixed as you scroll. The newer CSS3 <a href=\"https:\/\/www.css3.info\/preview\/background-size\/\">background-size<\/a> property is what applies all the positioning magic. Utilizing the many vendor prefixes will give us a wider range of support as well.<\/p>\n<p>It should be noted that the filter properties have not always played nice inside IE. Some people report having <strong>issues with scrollbars or selecting text <\/strong>on the page. To get around this bug you can try applying the <strong>background image codes onto an inner div inside the body, set to a full 100% width\/height<\/strong>.<\/p>\n<h3>CSS2 Fallback<\/h3>\n<p>Surprisingly I have found that more browsers support the CSS3 method than any other styles. But I will still offer this secondary method using regular CSS properties on an <code>img<\/code> element.<\/p>\n<p>I feel the biggest nuance with this method is when right-clicking on the background it will bring up the context menu as if you are clicking on an image, not clicking on a webpage. This may get annoying to visitors who cannot figure out why the menu is different. But if you are struggling with the CSS3 method and still wish to avoid JavaScript, then this may be your only option.<\/p>\n<pre>img.bg {\r\n  \/* Set rules to fill background *\/\r\n  min-height: 100%;\r\n  min-width: 1024px;\r\n\t\r\n  \/* Set up proportionate scaling *\/\r\n  width: 100%;\r\n  height: auto;\r\n\t\r\n  \/* Set up positioning *\/\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n<\/pre>\n<ul class=\"download\">\n<li><a href=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/demo\/index2.html\">Demo<\/a><\/li>\n<\/ul>\n<p>The image tag should be located directly inside your body before opening any other divs. The image will fall into the background and all your other content should wrap around. This is known to work in all major browsers (Safari \/ Firefox \/ Chrome \/ Opera) but isn\u2019t as well supported in IE6-7.<\/p>\n<h2>JavaScript Solutions<\/h2>\n<p>Let\u2019s move into the more dynamic codes using jQuery plugins instead of typical CSS. These are often written with flexibility in mind, so mobile smartphones and responsive layouts should be a #1 priority. jQuery is also a fairly common language which most web developers are somewhat familiar.<\/p>\n<p>There are possibly dozens of jQuery plugins to choose from, but I\u2019ll be presenting three of my favorites. Most of these code libraries are very easy to implement and setup within a new website. All of them are hosted on Github and thus present an excellent open source solution. This means you can expect fewer bugs and greater support as more developers contribute their knowledge to each plugin\u2019s codebase.<\/p>\n<h3>Backstretch<\/h3>\n<p>Some developers have seen the name <a href=\"https:\/\/www.jquery-backstretch.com\/\">Backstretch<\/a> appear on other websites and blog articles. This is a very popular plugin and has been around for almost 3 years, since December 2009. The developers have been eagerly updating this plugin, and now it even supports image slideshows along with static background images.<\/p>\n<p>To implement the code yourself just <a href=\"https:\/\/github.com\/jquery-backstretch\/jquery-backstretch\">download a copy<\/a> of the script and attach it to your webpage using a script tag. If you want to use CDN cloud hosting try <a href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-backstretch\/2.0.3\/jquery.backstretch.min.js\">this cdnjs link<\/a> instead. Then we just need to open another script tag and type a single line of jQuery code like this:<\/p>\n<pre>$.backstretch(\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg\");\r\n<\/pre>\n<ul class=\"download\">\n<li><a href=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/demo\/index3.html\">Demo<\/a><\/li>\n<\/ul>\n<p>The code library was written to be a single-line execution. This makes Backstretch super easy for even non-technical web developers to get working. You will not need to apply any extra HTML markup or other CSS properties. And the images will behave as 100% responsive to the browser window.<\/p>\n<pre>  \/\/ Duration is the amount of time in between slides,\r\n  \/\/ and fade is value that determines how quickly the next image will fade in\r\n  $.backstretch([\r\n      \"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/photo1.jpg\",\r\n      \"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/photo2.jpg\",\r\n      \"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/photo3.jpg\"\r\n  ], {duration: 3000, fade: 750});\r\n<\/pre>\n<p>The code above is slightly altered to support a slideshow in the background. You have the ability to list as many image locations as you want to display inside the slideshow, followed by two bits of metadata. The duration value is the amount of time in-between slides, coded in milliseconds. The 2nd fade value will determine how many milliseconds are required to fade from one image into the next.<\/p>\n<h3>Vegas<\/h3>\n<p>The <a href=\"https:\/\/vegas.jaysalvat.com\/\">Vegas Background jQuery plugin<\/a> is another excellent choice for web developers who are looking for a quick implementation. What makes Vegas stand out on its own is that you have more options for background customization. It is actually possible to setup an overlay effect using stripes or dots on top of your photo. A demo can be seen on the <a href=\"https:\/\/vegas.jaysalvat.com\/documentation\/setup\/\">Vegas documentation setup page<\/a> which uses a speckled overlay effect.<\/p>\n<p>You will need to include a copy of the Vegas JS and CSS files which can be found on the <a href=\"https:\/\/github.com\/jaysalvat\/vegas\">Github page<\/a>. This plugin may work using just a single line of code, but there are so many possible customizations in comparison to Backstretch. For now let\u2019s build a simple demo example in code:<\/p>\n<pre>$.vegas({\r\n  src:'\/img\/background.jpg'\r\n});\r\n<\/pre>\n<ul class=\"download\">\n<li><a href=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/demo\/index4.html\">Demo<\/a><\/li>\n<\/ul>\n<p>Believe it or not we can also use just 1 single line or block of code to get the same effect as before. Vegas allows further customization if you want to build an image slideshow, or add any overlay texture. On the <a href=\"https:\/\/vegas.jaysalvat.com\/documentation\/setup\/\">overlay docs page<\/a> you\u2019ll notice a series of pattern swatches which you can demo right there. This is one great example of the benefits to image overlays using Vegas, in comparison to other jQuery plugins.<\/p>\n<h3>Anystretch<\/h3>\n<p>My final jQuery solution is a plugin called <a href=\"https:\/\/github.com\/danmillar\/jquery-anystretch\">Anystretch<\/a> which is actually a fork of the Backstretch plugin. There are minor differences which may help developers looking to update the background image, or to apply BGs onto various page elements.<\/p>\n<p>This script works the same as before where you\u2019ll need a copy of jQuery and a copy of the <a href=\"https:\/\/codeload.github.com\/danmillar\/jquery-anystretch\/zip\/refs\/heads\/master\">anystretch files<\/a>. Then just setup the syntax as I have below, placed inside another set of <code>&lt;script&gt;&lt;\/script&gt;<\/code> tags. Note the <strong>speed<\/strong> parameter determines how quickly the image will fade in after it finishes loading, measured in milliseconds.<\/p>\n<pre>  $.anystretch(\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg\", {speed: 150});\r\n<\/pre>\n<ul class=\"download\">\n<li><a href=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/demo\/index5.html\">Live Demo<\/a><\/li>\n<\/ul>\n<p>This method will also work perfectly on divs or other elements found inside the body. Each BG photo will still resize at the proper aspect ratio and appear fully responsive on mobile browsers. The demo code below is placing a background image on a div with the ID of <code>#leftbox<\/code>.<\/p>\n<pre>  $('#leftbox').anystretch(\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/bg.jpg\", {speed: 150});\r\n<\/pre>\n<h2>The Final Solution?<\/h2>\n<p>Ultimately we live in an era with more than one solution to semantic web problems. Frontend developers are constantly pushing for greater support and figuring out new browser hacks. This is perfect for a community of designers who are interested in quickly applying these techniques onto webpage layouts.<\/p>\n<p>I can\u2019t specifically inform you on the best solution because it will change with each website. But I am still a big advocate for HTML5\/CSS3 and I feel the first CSS3 solution is enough for any modern website. Although admittedly, many of the jQuery plugins work perfectly and will even be supported in browsers which don\u2019t understand CSS3 properties.<\/p>\n<p>In the end it all comes down to your own personal choice and what you feel works best for the project. Test out 2 or 3 of your favorites and see which ones stand out from the crowd.<\/p>\n<h2>Examples of websites with oversized background<\/h2>\n<p>Along with the methods above I want to provide some examples for design inspiration. Web designers are often familiar with big background layouts, but it\u2019s tough recalling some exact domain names.<\/p>\n<p>In this showcase I have put together <strong>60+ examples of websites using big oversized background photos<\/strong>. Check out the layout styles and see how you can mimic a similar technique in your own projects.<\/p>\n<h3>Hiut Denim<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png\" alt=\"Hiut Denim website design company\"><\/figure>\n<h3>Kerem Suer<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/02-kerem-suer-freelance-designer-san-francisco.png\" alt=\"San Francisco freelance designer Kerem website\"><\/figure>\n<h3>Guns \u2018n Roses<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/03-guns-n-roses-band-website.png\" alt=\"Guns n Roses band music website photos\"><\/figure>\n<h3>H-Art<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/04-hart-drunk-creative-agency-website.png\" alt=\"work design products branding studio website layout\"><\/figure>\n<h3>Cayena Agency<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/05-cayena-hot-ideas-website-design.png\" alt=\"hot chili peppers website layout photography\"><\/figure>\n<h3>Design House Stockholm<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/06-design-house-stockholm-website-layout.png\" alt=\"interior design stockholm sweden website layout\"><\/figure>\n<h3>Martin Costa<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/07-martin-costa-personal-website-background.png\" alt=\"martin costa website big photos background\"><\/figure>\n<h3>Davidia Interior<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/08-davida-interior-design-agency-studio.png\" alt=\"furniture interior design studio website\"><\/figure>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/09-august-agency-marketing-design.png\" alt=\"Internet marketing design branding agency website\"><\/figure>\n<h3>Daniel Filler<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/10-daniel-filler-website-portfolio-layout.png\" alt=\"Daniel Filler website portfolio layout\"><\/figure>\n<h3>Whitmans<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/11-whitmans-new-york-city-hamburger.png\" alt=\"New York City hamburger shop website layout\"><\/figure>\n<h3>Tim Roussilhe<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/12-tim-roussilhe-french-design-portfolio.png\" alt=\"Tim Roussilhe website big photo backgrounds design\"><\/figure>\n<h3>Tag Interactive<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/13-tag-user-interface-design-agency-website.png\" alt=\"big video background effect TAG agency website\"><\/figure>\n<h3>Anna Safroncik<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/14-anna-safroncik-actress-website.png\" alt=\"Anna Safroncik personal website layout big photo backgrounds\"><\/figure>\n<h3>DOJO Studio<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/15-dojo-studio-agency-german-website.png\" alt=\"German design studio agency website layout\"><\/figure>\n<h3>Encandle<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/16-encandle-agency-design-studio.png\" alt=\"design studio agency website layout\"><\/figure>\n<h3>CreativePeople<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/17-cpeople-creative-people-website-portfolio.png\" alt=\"creative people studio design website agency\"><\/figure>\n<h3>Twelve Restaurant<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/18-twelve-restaurant-lounge-bar-website.png\" alt=\"restaurant food bar cooking dinner website layout\"><\/figure>\n<h3>de Certeau & Associates<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/19-de-certeau-associates-website-layout.png\" alt=\"architecture website layout studio agency big photos\"><\/figure>\n<h3>Medis Food & Bar<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/20-medis-cooking-bar-restaurant-website.png\" alt=\"food restaurant website layout big image backgrounds\"><\/figure>\n<h3>Yan Studios<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/21-yan-studios-website-fullscreen-background.png\" alt=\"full screen big website background photos yan design agency\"><\/figure>\n<h3>Blind Barber<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/22-blind-barber-website-layout-photos.png\" alt=\"classic retro photography background web design Blind Barber\"><\/figure>\n<h3>Reflexion Weddings<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/23-reflexions-weddings-europe-website.png\" alt=\"wedding europe website layout big photography\"><\/figure>\n<h3>CGRendering<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/24-cgrendering-website-architecture-layout.png\" alt=\"architecture website studio agency portfolio\"><\/figure>\n<h3>Shelley Sandzer<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/25-shelley-sandzer-website-portfolio-layout.png\" alt=\"Shelley website Sandzer restaurant big photo layout\"><\/figure>\n<h3>Marcus Thomas<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/26-marcus-thomas-website-portfolio.png\" alt=\"idea design agency website layout big photos\"><\/figure>\n<h3>Biamar 2012<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/27-biamar-website-photo-background-layout.png\" alt=\"fashion studio design website big photos background\"><\/figure>\n<h3>Inzeit<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/28-inzeit-mobile-retail-website-layout.png\" alt=\"Inzeit website studio mobile retail layout\"><\/figure>\n<h3>Blitz SF<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/29-blitz-san-francisco-california-agency-design.png\" alt=\"San Francisco California Blitz design studio website\"><\/figure>\n<h3>Au Petit Panisse<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/30-au-petit-panisse-restaurant-website-layout.png\" alt=\"fancy restaurant bakery layout au petit panisse 2012\"><\/figure>\n<h3>Ringve Media<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/31-ringve-media-china-asian-website-layout.png\" alt=\"Ringve Media website layout big photo background China\"><\/figure>\n<h3>Shaw and Shaw Photography<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/32-shaw-photography-website-photo-backgrounds.png\" alt=\"Shaw Photography website layout big photos background\"><\/figure>\n<h3>Werkstette<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/33-werkstette-gallery-portfolio-website-layout.png\" alt=\"Werkstette website layout big photos background css html\"><\/figure>\n<h3>Salt Surf<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/34-salt-surf-san-francisco-website-layout.png\" alt=\"retail website layout salt surf california ocean\"><\/figure>\n<h3>Pablo Gonz\u00e1lez<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/35-pablo-gonzalez-website-layout-design.png\" alt=\"pablo gonzalez personal website director\"><\/figure>\n<h3>David Mullett<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/36-david-mullet-photography-portfolio-website.png\" alt=\"David Mullett portfolio photo website layout\"><\/figure>\n<h3>Moxie Sozo<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/37-moxie-sozo-portfolio-agency-website.png\" alt=\"moxie sozo website layout big photos background\"><\/figure>\n<h3>David Nolan<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/38-david-nolan-new-york-gallery-website.png\" alt=\"David Nolan New York photography portfolio\"><\/figure>\n<h3>Flaek<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/39-flaek-footwear-shoes-website-layout.png\" alt=\"Flaek footwear website layout design big backgrounds\"><\/figure>\n<h3>Pizzaza<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/40-pizzaza-restaurant-big-backgrounds-website.png\" alt=\"Italian Pizzaza website layout big photos background inspiration\"><\/figure>\n<h3>500 Watt<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/41-500-watt-photography-portfolio-website.png\" alt=\"design studio agency website layout 500watt\"><\/figure>\n<h3>Dolphins Communication<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/42-dolphins-communications-design.png\" alt=\"Dolphin Design studio website agency background photos\"><\/figure>\n<h3>Top Dollar Photographers<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/43-top-dollar-photographers-website-photos.png\" alt=\"top dollar photographers website layout design creative\"><\/figure>\n<h3>Top Dollar Models<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/44-top-dollar-models-website-layout.png\" alt=\"agency modeling Top Dollar Models website layout\"><\/figure>\n<h3>Rebecca Barry<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/45-rebecca-barry-writer-director-producer-website.png\" alt=\"writer and film director Rebecca Barry website layout 2012\"><\/figure>\n<h3>Healing Histories<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/46-healing-histories-new-orleans.png\" alt=\"Healing Histories website New Orleans informational layout\"><\/figure>\n<h3>Goliath Sportswear<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/47-goliath-sportswear-clear-backgrounds.png\" alt=\"Goliath sports sporting website design big photos background\"><\/figure>\n<h3>Onside Sports Agency<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/48-onside-sports-agency-website-layout.png\" alt=\"Onside Sports agency website studio classic\"><\/figure>\n<h3>Jason Miller<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/49-jason-miller-studio-portfolio-website.png\" alt=\"Jason Miller studio webste layout design creative\"><\/figure>\n<h3>Display Creative<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/50-inside-design-display-creative-website.png\" alt=\"Italy Display Creative agency studio website layout\"><\/figure>\n<h3>Ines Papert<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/51-ines-papert-big-backgrounds-website.png\" alt=\"big photos background website layout ines papert\"><\/figure>\n<h3>Airwalk<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/52-skateboard-airwalk-website-layout.png\" alt=\"Airwalk skateboard branding design website layout\"><\/figure>\n<h3>Hasse Bronten<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/53-hasse-bronten-stand-up-comedian-website.png\" alt=\"Hasse Bronten website comedian German background photos CSS\"><\/figure>\n<h3>Ines Maria Gamler<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/54-ines-maria-gamler-website-illustrator.png\" alt=\"pure pleasure design Ines Maria Gamler website layout\"><\/figure>\n<h3>Killer Brigade<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/55-killer-brigade-website-design-layout.png\" alt=\"online shop clothes fashion website layout big photos background\"><\/figure>\n<h3>35mm Design<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/56-35mm-design-studio-website-layout.png\" alt=\"35mm design studio big photos background website layout\"><\/figure>\n<h3>Spring\/Summer<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/57-spring-summer-2011-website-layout-photos.png\" alt=\"Spring Summer website layout design inspiration\"><\/figure>\n<h3>Sandlewood Homes<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/58-sandlewood-homes-interior-design-website.png\" alt=\"Sandlewood interior homes website portfolio layout\"><\/figure>\n<h3>Matt Porterfield<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/59-matt-porterfield-website-layout-background-photo.png\" alt=\"Matt Porterfield photography portfolio website layout\"><\/figure>\n<h3>ASAA Architecture<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/60-asaa-architecture-axel-schoenert-website.png\" alt=\"asaa architecture interior design website layout studio\"><\/figure>\n<h3>AyerViernes<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/61-ayerviernes-website-portfolio-layout-backgrounds.png\" alt=\"Ayer Viernes website portfolio agency background photo\"><\/figure>\n<h3>ah asociados<\/h3>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/62-ah-media-studio-architecture-spain.png\" alt=\"asociados interior architecture Spanish website layout design\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic CSS3\/CSS2 techniques, or by using some open source third-party jQuery plugins. There are no right or wrong answers, just varying levels of support in older legacy browsers. Dig through this collection&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395,352],"tags":[2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Large Background Images in Web Design: Tips and Examples - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Large Background Images in Web Design: Tips and Examples\" \/>\n<meta property=\"og:description\" content=\"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-24T13:13:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Large Background Images in Web Design: Tips and Examples\",\"datePublished\":\"2019-07-24T13:13:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/\"},\"wordCount\":1480,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/oversized-background-image-design\\\/01-jeans-company-hiut-denim-website.png\",\"keywords\":[\"Website Design\"],\"articleSection\":[\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/\",\"name\":\"Large Background Images in Web Design: Tips and Examples - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/oversized-background-image-design\\\/01-jeans-company-hiut-denim-website.png\",\"datePublished\":\"2019-07-24T13:13:45+00:00\",\"description\":\"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/oversized-background-image-design\\\/01-jeans-company-hiut-denim-website.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/oversized-background-image-design\\\/01-jeans-company-hiut-denim-website.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/oversized-background-image-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Large Background Images in Web Design: Tips and Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Large Background Images in Web Design: Tips and Examples - Hongkiat","description":"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/","og_locale":"en_US","og_type":"article","og_title":"Large Background Images in Web Design: Tips and Examples","og_description":"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic","og_url":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-24T13:13:45+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Large Background Images in Web Design: Tips and Examples","datePublished":"2019-07-24T13:13:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/"},"wordCount":1480,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png","keywords":["Website Design"],"articleSection":["UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/","url":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/","name":"Large Background Images in Web Design: Tips and Examples - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png","datePublished":"2019-07-24T13:13:45+00:00","description":"In this article I want to put together a few solid techniques for building big, oversized background images. This may be accomplished through basic","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/oversized-background-image-design\/01-jeans-company-hiut-denim-website.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/oversized-background-image-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Large Background Images in Web Design: Tips and Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4A8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17616"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17616\/revisions"}],"predecessor-version":[{"id":48332,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17616\/revisions\/48332"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17616"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}