BsnTech Networks is a small business specializing in affordable website design, reliable website hosting, website graphics design, website logo design, and domain name management & registration.

  Affordable Website Design starting at $75
  Mirrored website hosting starts at $8 per month on our redundant servers
  Domain Name registration with privacy block for $20 a year

Get an Instant Website Design Quote

<< Previous Post (Get What You Pay For With Hosting) | (Having the Same Look & Feel to a Website) Next Post >>

Making a Background Image Static or Stick
Friday, 20 May 2011 12:42

Many web designers want to make a site that has a background that doesn't move when the page is scrolled up or down.  This is known as a 'sticky background'.  The idea is that you can create one large graphic - and then this graphic remains in the exact same place - no matter how long the page is.  It is a good design tool to use in some instances.

How can you make a website background static or not move?

A little bit of CSS, of course!

These are the three main pieces you need.  You need to set the background-image, background-repeat, and background-attachment CSS properties:

background-image: url('../images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;

From there, you then need to set the location of the background attachment.

In this case, I want to make the background image centered (so that no matter how wide it is, it will always appear correctly on the site) and set it so it is attached to the "top" of the page.  When attaching to the top, that means the very top of your graphic will appear at the top of the site.  Then if the graphic is 1000 pixels tall and someone's screen is only 900 pixels tall, the last 100 pixels of the image will be cut off.  You can also use "bottom" if you'd prefer.

background-position: top center;

So, now you know how to make a website background stick and not move when the page is scrolled!

 

Comments 

 
#1 Pique 2011-12-17 10:26
Thank u! Made my day :-)
Quote
 

Add comment


Security code
Refresh

Affordable Website Design by Affordable Website Design
Server: Arcola-P