ArtisteerTutorial.com

  • Learn how to create awesome sites with Artisteer!

How to have a unique background on each page of your WordPress website

In this video, I’ll show you how to have a different background image on the various pages within your site. Specifically, I’ll show you how to change the background of your sheet, not the entire website.

27 Responses to How to have a unique background on each page of your WordPress website

  • Thank you SO much for this Zach!

    I’ve been looking for the correct CSS to use for this for days now and finally I have the code that works. I can’t tell you how happy you have made me!

    I can now change the main background, sheet background, horizontal top menu background and header image for each page with ease! Oh and the backgrounds of the widgets on different pages too! AND I know how to change any other elements if I need to. Don’t worry my site isn’t going to be quite as confusing as it sounds LOL

    And the code works fine when used in the additional CSS box I have for each page or post via a WP plugin so no worries that I might lose it with upgrades etc.

    I’m a girl used to hand coding in html using style sheets as you can see from my driving school web site and was hating how much creativity seemed to be out of my reach with WP, even when using Artisteer. But all is resolved now and I’m actually looking forward to the next three sites I plan to build.

    I’ve bookmarked your page and will be signing up to your free Artisteer course before the month is out.

    Thank you so much.

  • John Pollard says:

    Oops forgot a line

    .art-sheet{background: url(‘http://www.yoursite.com/wp-content/uploads/2014/07/purty_picture.png’);
    top left repeat: repeat; !important;
    }

    I actually forgot the last squiggly bracket when I did it but it still worked

  • John Pollard says:

    Spent a few hours trying figure out how to do this. Your instructions were the first to work. Could have mentioned how to do the background on all pages but I figured it out. Just leave the page id out like so
    .art-sheet{background: url(‘http://www.yoursite.com/wp-content/uploads/2014/07/purty_picture.png’);
    }

    Thanks

  • Gaetan says:

    Thanks for this helpfull tutorial, appreciated, could i make those backgrounds resize if i would set width and height to 100%?? That would possible deform the image, i have slight differences in height in some pages and a little deformation wouldnt hurt the design.

  • Jase says:

    Zach , how do i get this done in art.main ?

    really having a difficult time with this…i saw you said something about nesting the div class , can you give me an example ?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Artisteer Video Training Course

Want to learn how to create great websites with Artisteer?

Then you MUST see this training!

It's simple, step-by-step, and will turn you into an Artisteer pro!

Sign up for free below. 

New Graphic

We respect your email privacy

Recent Comments