Skip to Content

Add background image to node

Client brief:

Show the different styles of illustration INCLUDING within the welcome article.

Method:

Using Firefox's Firebug I identified the div controlling this articles elements as:

<div id="node-30" class="node sticky">

Firstly I tried adding properties to:
.sticky but that would limit the use of this feature - so instead

In [theme]/style.css i added the following

#node-30 {
  padding: 1em;
  background: #000 url(http://www.leetoons.com/images/total.jpg) repeat-x

scroll 0% 100%;
  border: 1px solid #e7e0db;
  margin-bottom: 200px;
padding-bottom: 190px;
}

The image was created to work well in a 1024x768 resolution but to tivertically if the users screen is larger. The margin/padding-bottom value ensures that if the article is longer then it never crashes into the bottom image.

Result:

www.leetoons.com