fresh photoshop tutorials & resources
Log in Register
Painted Wood Photoshop Action Comics Book Photoshop Action Infographic JS Library title= Rays of Light Photoshop Action

CSS Lined Paper Background

Tutorials CSS 15392 Views September 17th, 2011

Lined paper background for web design is very easy to do. You just have to know a bit of CSS and you also need a nice texture. Fortunately, in this post I will provide you with both. I will show you the CSS code that you need to add to your web page in order to add the lined notebook paper background and also I will direct you to some free notebook paper textures, which are actually seamless Photoshop patterns.

Advertisment

The lined paper background

To add the lined paper background to a web page through CSS code you will first have to have an image which you can then use as a seamleass texture.

In one of my older posts Notebook Photoshop Pattern I've made available for you some 30 different notebook paper Photoshop patterns. Download the archive and you will find inside 30 .PAT files which you have to import into your Photoshop. The easiest way to import a Photshop pattern is to just drag and drop the .PAT file in your Photoshop.

The notebook lined paper seamless texture in the archive are all 60x60 pixels which means that the texture tile image that you will place on the page background will also have to be 60x60 pixels. So, create a new file in Photoshop with size 60x60, fill the layer with a color (it does not matter which color) and then go to the layer styles by double clicking on the layer. Go to Pattern Overlay and choose from the patterns one of the newly imported patterns. Save the result as a .JPEG or .GIF and upload it somewhere on your site. As an example I chose a single lined yellow paper pattern and the resulting image should look like this:

lined notebook paper background

CSS code for background texture

Now that you have the texture tile image you can add it through CSS. If you are new to CSS, don't be afraid, CSS is really easy. For a quick insight on CSS please go to What is CSS and How to Use Style Sheets for Web Design.

The quickest way to add the background texture to your web page with CSS is to use inline CSS. So, edit your HTML page and add a style attribute to the body tag like this

    <html>
    ...
       <body style="background-image:url('path_to_your_image/background-image.jpg;'">
       </body>
    ...
    </html>
    
and here it is- with this simple CSS style your web page just got a notebook paper background texture.

Some adjustments

You can adjust the result you get by modifying the size of the .JPG or .GIF paper texture image and the patter will still be seamless. Most of the websites that use seamless pattern for their backgrounds use a small size pattern. This has the advantage that the page loads faster and also it looks better.

Demo

To see some live examples for this CSS lined paper background tutorial I've made the following images. By rolling over them you will be able to see how the PSD Dude website would look with the lined notebook paper background.

move your mouse over me
lined notebook paper background big

or move your mouse over me
lined notebook paper background small

or move your mouse over me
math paper css

Be a Cool Dude!

With your donation you can help us maintain this website and keep producing free resources many months to come! Any amount counts

1 comment(s) for "CSS Lined Paper Background"

Chris Sawyer
12:34 AM Sunday, May 19, 2013
Just what I was after, thank you! reply

Have something to say? Leave us a comment

Click to Upload Fan Art!

Share your Psd Dude inspired works


title=
Animated Kaleidoscope Photoshop Action
Recent Posts
Learn how to create a LED screen text effect in Adobe Photoshop from this quick tutorial for beginne...
Learn how to create a duotone photo effect in Adobe Photoshop in just 2 easy steps. Using the same t...
Food typography is the best method to display your message and logo in a very cool way. The food tex...
Learn how to create light text effects in Photoshop from these amazing tutorials. This collection co...

      Torn Photo Effect Photoshop Action
Popular Posts
There's something about ribbons that just looks good. I thought about making this Ribbon Vector Free...
In today list of free textures for Photoshop I have gathered over 100 amazingly beautiful wood textu...
I have decided to create a new character from Alice in Wonderland and I hope that maybe someday to r...
Today's list is a collection of Free Photoshop Layer Styles. As many of you already know, Photoshop ...
I am not a fan of tattoos but I can still appreciate it as art. There are a lot of people out there,...
Another Photoshop texture that is really used by digital artists is for sure the old paper texture. ...
To create a Comic Book Effect in Photoshop we have to mix all sort of filters and blend them togethe...
Hello girls and boys! Today i want to make a cartoon rainbow... i really hope you will like it! ...
In this tutorial I will show you how to create a 3D map in Photoshop using different 2D and 3D model...
Stitching and sewing can be created also in Photoshop with very realistic results. So in this tutori...
Subscribe via email
LIKE US ON FACEBOOK

      Pixel Mix Artist Photoshop Action
top