Still As Life

For the past 5 days or so I have been wrestling with creating floating backgrounds for a clients website. None of the options I could think of wanted to work. Now it was a little different to your usual floating background.

Usually you'll have a background that you just don't want to change throughout the course of the website so you would use something like:

<style type="text/css">
body {
background-color: #ffffff;
background-attachment: fixed;
background-image: url(background.jpg);
background-repeat: no-repeat;
}
</style>

But I needed something a little different to this, I not only needed the background image to stay put as I scroll, but I needed it to adjust to fit different screen resolutions and remain central so as to suit the website content.

I just could not get this to work how I wanted though as I had to have the content of the website aligned with the centre of the background, so that it would fit with the white spacing.

I eventually ended up just creating a div and putting the background in the div and aligning the content centrally in the div. Of course this just didn't work on anything below 1280x960 as there would be a scroll bar due to the size of the background, so back to the style sheet drawing board for me.

Now, as I was hunting for information regarding this, I came across very little. Eventually I found something on the W3 Schools website that looked like it would do the trick, the background-position element. I'm not sure why I've never come across this particular element before, but it was there so I gave it a try, exactly as they demonstrated it.

<style type="text/css">
body {
background-color: #ffffff;
background-attachment: fixed;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: right top;
}
</style>

Again, this did not work exactly as I had intended. It worked as long as the window was the right size to put the content in the centre, when the background was right aligned. I now had an idea of where to go though, if I could align to right top, why not just top?

So I changed my code slightly to reflect this idea:

<style type="text/css">
body {
background-color: #ffffff;
background-attachment: fixed;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: top;
}
</style>

And there you go. By just aligning the background to the top, it was automatically centred as well, so regardless of how big the screen resolution is, the background floats to the centre along with the content.

I believe most CSS is fairly self explanatory and easy to use, so I don't see why some developers are so reluctant to utilize it, but in case there is anything you aren't sure about in this snippet, here is an explanation of each piece of code:

First off I have created an inline style (usually I would put this in an external style sheet, but for the sake of demonstration I'm using inline styling):

<style type="text/css">

Following this I have told the browser that the HTML tag I am applying the style to is the body tag with:

body {

I have then specified the background colour. This is not necessary, but is good practice in case the background image can't be found for whatever reason or if a user has images disabled etc:

background-color: #ffffff;

Next I told the browser not to scroll the background but to keep it in the one spot:

background-attachment: fixed;

I then specified the path to the image I wanted for my background:

background-image: url(background.jpg);

Since I don't want the background to repeat at all, horizontally or vertically, I specified as such:

background-repeat: no-repeat;

The last CSS element I have defined is where I want the background to be positioned in relation to the browser window:

background-position: top;

Finally, I closed the style sheet, and then closed the inline style tag:

}
</style>

Of course, all of these elements have a variety of values that could be used in them instead of the ones I have used, but in order to make the background really float the way I wanted these are the tags I had to use.

I hope this makes your job easier somewhere along the way.

Labels: code, internet, special interest, technology