Adding a tiled background to my blog

I’m getting into HTML & CSS but I’m not at a stage where I can solve this one by myself. What I’d like to do is achieve the same kind of look at this website . [url=http://www.onlinebettingoffers.com/logos/tile.jpg]This is the tile I’m going to use.

I followed a tutorial I found and added the following piece of code to the style sheet.

body {
font-family:Arial, serif;
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.7em;
background-image:url('http://www.onlinebettingoffers.com/logos/tile.jpg');

}

When doing so, it does tile the background, over the entire page including behind the posts. I’d still like the white body down the middle. I was hoping someone would give me guidance to help me achieve this. Thanks for your help. Website in question:

http://www.onlinebettingoffers.com/

add in background-repeat:repeat;

Thanks for the response, but that unfortunately gives the same end result, i.e. the title is repeated all over the page including the central column.

I checked out your page and I don’t see any background at all…?? Could you post your changes?

Yeah of course. This is how it appears…

http://img153.imageshack.us/img153/4223/tiledbg.jpg

(Thanks…)

If you just want the image to be repeated in the x or y-axis, for example of an x-axis: background-repeat: repeat-x; you may also want to position it too.

[FONT=Verdana]Else do you mean; a central column (for main content) without the background image in which case just create another DIV wrapper and only apply the “tiled” background to the body element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      CSS Background
    </title>
<style type="text/css">
/*<![CDATA[*/
<!-- 
body {
  background-image : url('http://www.onlinebettingoffers.com/logos/tile.jpg');
}
#main {
  background-color : white;
}
-->
/*]]>*/
</style>
  </head>
  <body>
    <div id="main">
      Lorem Ipsum
    </div>
  </body>
</html>

That’s just a crude example of course.
[/FONT]

Looks like it is fixed now, I see the white background. In case you still getting the bug I presume it is because of the floating elements (content container and the sidebar), in that case just add overflow:hidden to the container div (#wrapper) together with the background color and you should be fine.

ALso, background images on the body element should be avoided because you can run into a 1px jog which results in the image being shifted slightly, see the FAQ for full details :slight_smile:

That only applies when the BG image on the body is designed to join together with another BG image or the page wrapper. The problem happens when the image is centered on the body.

It does not apply to a simple repeating image that paints the body on the x&y axis.