How do I insert a repeating, tiled image into the background of a WordPress page or post (not page background)?

3 Views

I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.

I have investigated as extensively as I can given my coding deficiencies. Currently, I’ve been editing the styles.css file. I replaced this default code:

Read More
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }

with this revised code, which I cobbled together with my hazy understanding of CSS. 

body {
  background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif")  repeat; nowhitespace: afterproperty;
  background-repeat: repeat;
  background-color:rgba(255,255,255,0.0);
  font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; 
}

My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was ‘behind’ it). I don’t know. I was throwing darts. Maybe it’s in the wrong place. Maybe it’s just flat out wrong. 🙂

I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Rather than setting the CSS of your body element, try setting it on #main-content

    Also, you only need the first line to achieve the effect you want:

    #main-content {
    background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif")  repeat;
}

  2. If you don’t want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn’t be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.

    Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.

    #main-content {
    background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif")  repeat;
}