Web Analytics Made Easy -
StatCounter Multiple background images . . . - CodingForum

Announcement

Collapse
No announcement yet.

Multiple background images . . .

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Multiple background images . . .

    I'm using the same style sheet for multiple pages. The problem is that I have unique backgrounds on each page. I don't want to make a new style sheet for each page when the only difference is the background.

    body {
    background: #fff url(image/header.png) repeat-x;
    color: #333333;
    font-size: 13px;
    }


    Any suggestions?

  • #2
    The website has no idea that you are on different pages, so really the only way to adjust this is to have an additional css call (which you do not want to do), or you can dynamically assign the background url with php (if you're using php).

    You could also set an outer container div to act as your background, and give it a different ID on each page, and then in your one css file add a background to each div.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

    Comment


    • #3
      All you need to do is use a different class or ID for the <body> tag on each page that you want to have use a non-default background image. You can use ASP or PHP to automate that task if needed.

      Then just add the appropriate lines of CSS to your single CSS file and you're done (body classes used for example here):

      Code:
      body{
      	background: #fff url('image/header.png') repeat-x;
      	color: #333333;
      	font-size: 13px;
      }
      body.page_1{
      	background-image:url('image/another_header.png');
      }
      body.page_2{
      	background-image:url('image/yet_another_header.png');
      }
      This is similar to resdog's second suggestion but without the bloat of extra markup and without the complication of page height management and/or absolute positioning problems, etc.
      The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
      See Mediocrity in its Infancy
      It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
      Seek and you shall find... basically:
      validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

      Comment

      Working...
      X