New WordPress Site using Understrap Starter Theme

This is a site I made using the Understrap WP theme starter.

I find it very easy to use and it’s a lot more compatible with my windows setup than Roots/Sage.

I guess it’s not as powerful but for creating simple WordPress themes quickly it’s ideal. It has Bootstrap4 built in and Gulp etc.

Gulp dist creates a nice folder ready for deploying to the server.

Here’s the site!

Wordpress theme using understrap

Advertisements

Full page background image that works on all browsers and even iphones (ios)!

Hi there,

One page sites pretty popular on the web and they work great for scrolling on mobile. Full page backgrounds can also look pretty cool. Unfortunately background-size:cover and background-attachment: fixed don’t really work on ios (safari, chrome, anything on an iphone really)! You often get a really stretched out image or no image shows at all!

I created a few one page sites recently and couldn’t get it to work. I realise now that my problem was background-attachment:fixed. The solution is to actually make the div fixed and not use background-attachment at all. This solution only needs CSS.

Here’s an example:

HTML

<html lang="en">
<head></head>
  <body>
<div class="bkgdImage"></div>
<header>
   </header>
     <section id="homeContainer">
       //content etc
     </section>
  </body>
</html>

Notice the empty div with the class ‘bkgdImage’? That’s the key.  Don’t put the background image on the body. You could put the background image on the body. And make the body fixed as is done here. But this way seems to be easier.

CSS

html{
height: 100%;
min-height: 100%;
}
body {
 min-height: 100%;
 width: 100%;
height: 100%;
margin: 0;
}
.bkgdImage {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100; (so it's behind your content)
 margin: 0;
 background: url(../yourimage.jpg) center center no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
 Voilà. If you want to see it in action check out my portfolio site: Goodlooking.co.nz
I’ve tested this on safari and chrome on my iPhone 5 and on chrome on my samsung.  It works! Let me know if you have any problems in the comments.