11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

How difficult is an effect like this...

by advertisethis
9 replies
  • WEB DESIGN
    • |
I am fairly new to web design. I have mostly just been doing a lot of basics with Wordpress, squeeze pages, landing pages, basic template editing, and what not. Is using a photo for a total page background like they use at thehipabduction dot com particularly difficult?
#difficult #effect
  • Profile picture of the author NovaAffiliate
    You'll just need to make sure that the photo you're using is big or small enough for your website; know the dimensions you plan on using. It's a lot of trial and error to take up every pixel of space.
    {{ DiscussionBoard.errors[4702979].message }}
  • Profile picture of the author Amir Kostic
    There are multiple ways to do this. One of the simplest ways is simply to add background image tag to your body tag.

    It should look something like this:

    <html>
    <body background="yourimage.png">
    <p>Website content</p>
    </body>
    </html>

    There are many HTML and CSS tutorials out there, just use google. Also one of the best sources for web design tutorials is w3schools.

    Hope that helps.
    {{ DiscussionBoard.errors[4703064].message }}
  • Profile picture of the author Mr Bill
    Make sure the image is less than 50-100k. Preferably smaller. I've seen some people load 2 megabyte images as their background. Not good.
    {{ DiscussionBoard.errors[4703309].message }}
    • Profile picture of the author Kyle Oliveiro
      [DELETED]
      {{ DiscussionBoard.errors[4703342].message }}
      • Profile picture of the author deelow
        Originally Posted by Kyle Oliveiro View Post

        This is incorrect. Your background image has to be of a very high resolution so that it displays correctly on larger screens. Since it's likely that your image will be upwards of 500KB in size, you should use an appropriate background color which will be displayed before the image loads.

        Also, don't go with inline CSS styling. Do it in style.css.
        totally agree with this - we had a site which used a very large image that resized with the windows site - I found a bit of trail and error on the image file size - it def cannot be to small as the resolution will just look bad - unless ur theme is lending its self to that off course..

        check out FOODILY - Find recipes online. Share them with your friends. - they do it really well - and i love the small fade in the bg image has when its loaded.
        Signature
        Freelance web and app designer
        {{ DiscussionBoard.errors[4703539].message }}
  • Profile picture of the author Mr Bill
    Ok maybe 50k might be pushing it for a full colour jpg but I can make a large image small in size. The last thing you want to be doing is loading a big fat 500kb+ background image on every page load.
    {{ DiscussionBoard.errors[4703372].message }}
  • Profile picture of the author Kyle Oliveiro
    [DELETED]
    {{ DiscussionBoard.errors[4703500].message }}
    • Profile picture of the author Mr Bill
      There is such a thing as browser cache? I had no idea. Thanks for letting me know. :rolleyes:

      Don't load massive images as backgrounds!

      That background image at Foodily is 90kb.

      Originally Posted by Kyle Oliveiro View Post

      Loading a 500kb+ image on every page on your website would be terrible.

      Luckily, there is such a thing as a browser cache so you only need to load the same image once until you delete your cache data.
      {{ DiscussionBoard.errors[4704960].message }}
  • Profile picture of the author Joe Mobley
    The image at The Hip Abduction is ~140K.

    Joe Mobley


    Originally Posted by advertisethis View Post

    I am fairly new to web design. I have mostly just been doing a lot of basics with Wordpress, squeeze pages, landing pages, basic template editing, and what not. Is using a photo for a total page background like they use at thehipabduction dot com particularly difficult?
    Signature

    .

    Follow Me on Twitter: @daVinciJoe
    {{ DiscussionBoard.errors[4705447].message }}
  • Profile picture of the author FraserJilani
    The images at thehipabduction are small images in both resolution and size. The effect being achieved is due to them using a css property called background-size, once it's set to cover the image will stretch to entire window size while maintaining aspect ratio by cropping either horizontally or vertically.

    The images used by those guys aren't looking bad across different sizes because they added some noise to the image so it doesn't appear too pixelated and ugly once resized.

    If you want to know how they are cycling between images you can look through this code:-

    Code:
    <script language="JavaScript1.2">
/* you must supply your own immages */
var bgimages=new Array()
bgimages[0]="http://www.thehipabduction.com/images/bg/home.jpg"
bgimages[1]="http://www.thehipabduction.com/images/bg/home2.jpg"
bgimages[2]="http://www.thehipabduction.com/images/bg/home3.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide()
{
  if (inc<bgimages.length-1)
    inc++
  else
    inc=0
  document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlide()",3000)')
  
</script>
    {{ DiscussionBoard.errors[4706491].message }}
  • Profile picture of the author chaseclicks
    Easiest way is the background="image.jpg" as described above, or use css:

    body {background: #fff url('image.jpg') top center no-repeat; }
    {{ DiscussionBoard.errors[4706755].message }}

Trending Topics