Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Different background images on pages

By: sine184 on May 7th, 2012  |  syntax: None  |  size: 9.57 KB  |  views: 129  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. This is my CSS file. Can anyone tell me how to change it so that every page will have a different background image.
  2.  
  3.  
  4.  
  5. /*--------------------------------------------------------------
  6.                                 =Reset default browser CSS.
  7. The goal of a reset stylesheet is to reduce browser
  8. inconsistencies in things like default line heights, margins and
  9. font sizes of headings, and so on.
  10. --------------------------------------------------------------*/
  11.  
  12. html, body, div, span, h1, h2, h3, p, a, i, font, strong, ol, ul, li, form, label, caption {
  13.         border: 0;
  14.         font-family: inherit;
  15.         font-size: 100%;
  16.         font-style: inherit;
  17.         font-weight: inherit;
  18.         margin: 0;
  19.         outline: 0;
  20.         padding: 0;
  21.         vertical-align: baseline;
  22. }
  23. /* Remember to define focus styles! */
  24. :focus {
  25.         outline: 0;
  26. }
  27. body {
  28.         background: #fff;
  29.         line-height: 1;
  30. }
  31. ol, ul {
  32.         list-style: none;
  33. }
  34. caption {
  35.         font-weight: normal;
  36.         text-align: left;
  37. }
  38. a img {
  39.         border: 0;
  40. }
  41. article, aside, details, figcaption, figure,
  42. footer, header, hgroup, menu, nav, section {
  43.         display: block;
  44. }
  45.  
  46. /*-----------------------------------------------
  47.                                         =Structure
  48. -----------------------------------------------*/
  49. /* This is for the screen
  50.    The CSS padding properties define the space between the element border and the element content. */
  51. body {
  52.         padding: 0;
  53. }
  54. /* This is for the page on that screen
  55.    The CSS margin properties define the space around elements. */
  56. #page {
  57.         margin: 1em auto;
  58.         /* This means that the page max-width is 1000 pixels width. */
  59.         max-width: 1000px;
  60. }
  61. /* This is for the text in the header */
  62. #branding hgroup {
  63.         margin: 0;
  64.         padding: 0;
  65. }
  66. /* This is for the text in the menu "ribbon". */
  67. #access div {
  68.         margin: 0;
  69.         padding: 0;
  70. }
  71. /* With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
  72.    This is the content os the left side. */
  73. #primary {
  74.         float: left;
  75.         /* Old value
  76.         margin: 0 -26.4% 0 0; */
  77.         margin: 0;
  78.         width: 60%;
  79.         padding: 0;
  80. }
  81. /* This is for the text in the page (the actual content) on the left side.
  82.    The parameters are linked to #primary. So width is 100% of the #primary width. */
  83. #content {
  84.         /* Old value
  85.         margin: 0 34% 0 7.6%; */
  86.         margin: 0 0 0 30px;
  87.         padding: 0;
  88.         width: 100%;
  89. }
  90. /* This is for the links on the right side */
  91. #secondary {
  92.         float: right;
  93.         /* Old value
  94.         margin: 0 7.6% 0 0; */
  95.         margin: 0;
  96.         /* Old value
  97.         width: 18.8%; */
  98.         /* 30% of the #page width */
  99.         width: 30%;
  100.         background-color: White;
  101. }
  102.  
  103. /*-----------------------------------------------
  104.                                         =Global
  105. -----------------------------------------------*/
  106. body, input, textarea {
  107.         color: #373737;
  108.         font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
  109.         font-weight: 300;
  110.         line-height: 1.625;
  111. }
  112. /* This is for the whole screen */
  113. body {
  114.         background-color: #e2e2e2;
  115.         /* I set the background image in the designer (Appearance/Background).
  116.         background-image: url(images/Ireland5.jpg);
  117.         background-repeat: repeat;
  118.         background-position: center top; */
  119. }
  120. /* This is for the part of the page where the text is */
  121. #page {
  122.         /*This is the original color
  123.         background: #fff;*/
  124.         background-color: #4169E1;
  125.         background-image: url(images/Lightning8.jpg);
  126.         background-repeat: repeat;
  127.         background-position: center top;
  128. }
  129. /* Headings */
  130. h1,h2,h3 {
  131.         clear: both;
  132. }
  133.  
  134. /* Text elements */
  135. p {
  136.         margin-bottom: 1.625em;
  137. }
  138. ul {
  139.         list-style: circle;
  140.         margin: 0;
  141.         padding: 0;
  142. }
  143. ol {
  144.         list-style-type: decimal;
  145.         margin: 0;
  146.         padding: 0;
  147. }
  148. li {
  149.         margin: 0;
  150.         padding: 0;
  151. }
  152. strong {
  153.         font-weight: bold;
  154. }
  155. i {
  156.         font-style: italic;
  157. }
  158.  
  159. /* Links */
  160. a {
  161.         color: #1982d1;
  162.         text-decoration: none;
  163. }
  164. a:focus,
  165. a:active,
  166. a:hover {
  167.         text-decoration: underline;
  168. }
  169.  
  170. /*-----------------------------------------------
  171.                                         =Header
  172. -----------------------------------------------*/
  173. #branding {
  174.         /* This is original definition. It is for the header border.
  175.         border-top: 2px solid #bbb; */
  176.         padding-bottom: 10px;
  177.         position: relative;
  178.         z-index: 9999;
  179. }
  180. #branding img {
  181.         height: auto;
  182.         margin: -50px 0 -7px 0;
  183.         padding: 0;
  184.         width: 100%;
  185. }
  186.  
  187. /* This is for the title */
  188. #site-title {
  189.         margin: 0 0 0 20px;
  190.         padding: 10px;
  191. }
  192. #site-title a {
  193.         color: #111;
  194.         font-size: 30px;
  195.         font-weight: bold;
  196.         line-height: 36px;
  197.         text-decoration: none;
  198. }
  199. #site-title a:hover,
  200. #site-title a:focus,
  201. #site-title a:active {
  202.         color: #1982d1;
  203.         text-decoration: underline;
  204. }
  205. #site-description {
  206.         color: #7a7a7a;
  207.         font-size: 14px;
  208.         margin: 0 270px 3.65625em 0;
  209. }
  210.  
  211. /*-----------------------------------------------
  212.                                         =Menu
  213. -----------------------------------------------*/
  214. /* This is for the menu "ribbon". */
  215. #access {
  216.         background: #222; /* Show a solid color for older browsers */
  217.         clear: both;
  218.         display: block;
  219.         float: left;
  220.         margin: 0;
  221.         padding: 0;
  222.         width: 100%;
  223. }
  224. /* For the actual menu items. */
  225. #access ul {
  226.         font-size: 13px;
  227.         list-style: none;
  228.         margin: 0 0 0 20px;
  229.         padding: 0;
  230. }
  231. /*This is how the text in the menu is positioned. */
  232. #access li {
  233.         float: left;
  234.         position: relative;
  235. }
  236. /* This is for the actual menu item. */
  237. #access a {
  238.         /* Display color of the  menu item. */
  239.         color: #FF0000;
  240.         /* How the  menu item is displayed when you go over it. */
  241.         display: block;
  242.         /* This is the height of the black "ribbon" of the menu items. */
  243.         line-height: 3em;
  244.         padding: 0 1em;
  245.         text-decoration: none;
  246. }
  247. #access li:hover > a {
  248.         /* This is the color of the menu item when you go over it. */
  249.         color: #373737;
  250.         /* This is the background color of the menu item when you go over it. */
  251.         background-color: Lime;
  252. }
  253. /* When you click on the menu item it goes to that page and menu item is bold, so that you know what is selected. */
  254. #access .current-menu-item > a {
  255.         font-weight: bold;
  256. }
  257.  
  258. /*-----------------------------------------------
  259.                                         =Content
  260. -----------------------------------------------*/
  261. /* This is for the content in the page */
  262. #main {
  263.         clear: both;
  264.         padding: 1em 0 0 0;
  265.         margin: 0;
  266. }
  267. /* This is for the bottom of the page. */
  268. .hentry {
  269.         border-bottom: none;
  270.         margin: 0 0 1em 0;
  271.         padding: 0 0 1em 0;
  272.         position: relative;
  273. }
  274. /* It displays a border line in the bottom of the page. */
  275. .hentry:last-child {
  276.         border-bottom: none;
  277. }
  278. /* Edit button. */
  279. .entry-meta .edit-link a {
  280.         background: #eee;
  281.         -moz-border-radius: 3px;
  282.         color: #666;
  283.         float: right;
  284.         font-size: 12px;
  285.         line-height: 1.5em;
  286.         padding: 0 8px;
  287. }
  288. /* Color of the text and background when you go over it by mouse. */
  289. .entry-meta .edit-link a:hover {
  290.         background: #888;
  291.         color: #FFFF00;
  292. }
  293.  
  294. /*-----------------------------------------------
  295.                                         Images
  296. -----------------------------------------------*/
  297. /* Fluid images for posts, comments, and widgets */
  298. .entry-content img,
  299. .widget img {
  300.         max-width: 90%;
  301. }
  302. /* Make sure images with WordPress-added height and width attributes are scaled correctly */
  303. img[class*="align"],
  304. img[class*="wp-image-"],
  305. img[class*="attachment-"] {
  306.         height: auto;
  307. }
  308. img.size-full,
  309. img.size-large {
  310.         max-width: 90%;
  311.         width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
  312.         height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
  313. }
  314. /* Properties of the gallerey. */
  315. .gallery-caption {
  316.         color: #FFFF00;
  317.         font-family: Georgia, serif;
  318.         font-size: 12px;
  319. }
  320.  
  321. /* Image borders */
  322. img[class*="align"],
  323. img[class*="wp-image-"],
  324. #content .gallery .gallery-icon img {
  325.         border: 1px solid #C71585;
  326.         /* It means that there is no border around the images.
  327.         border: none; */
  328.         padding: 0;
  329.         margin: 0;
  330. }
  331. /* Add some useful style to those fancy borders for linked images ...
  332.    It is seen when you go over with a mouse. */
  333. a:focus img[class*="align"],
  334. a:hover img[class*="align"],
  335. a:active img[class*="align"],
  336. a:focus img[class*="wp-image-"],
  337. a:hover img[class*="wp-image-"],
  338. a:active img[class*="wp-image-"],
  339. #content .gallery .gallery-icon a:focus img,
  340. #content .gallery .gallery-icon a:hover img,
  341. #content .gallery .gallery-icon a:active img {
  342.         background: #BDB76B;
  343.         border-color: #BDB76B;
  344. }
  345.  
  346. /*-----------------------------------------------
  347.                                         =Widgets
  348. -----------------------------------------------*/
  349. /* This is on the right side of the page */
  350. .widget-area {
  351.         font-size: 12px;
  352.         width: auto;
  353. }
  354. .widget {
  355.         clear: both;
  356.         margin: 0 0 0 0;
  357. }
  358. .widget-title {
  359.         color: #666;
  360.         font-size: 12px;
  361.         font-weight: 500;
  362.         letter-spacing: 0.1em;
  363.         margin: 0;
  364. }
  365. /* Where the link starts and how big the font is */
  366. .widget ul {
  367.         font-size: 12px;
  368.         margin: 0 0 0 1.2em;
  369. }
  370. /* This is for the description of the link */
  371. .widget ul li {
  372.         color: #777;
  373.         font-size: 12px;
  374. }
  375. /* This is for the actual link */
  376. .widget a {
  377.         font-weight: bold;
  378.         text-decoration: none;
  379. }
  380. .widget a:hover,
  381. .widget a:focus,
  382. .widget a:active {
  383.         text-decoration: underline;
  384. }
  385.  
  386. /*-----------------------------------------------
  387.                                         =Footer
  388. -----------------------------------------------*/
  389. #colophon {
  390.         clear: both;
  391. }
  392.  
  393. /*-----------------------------------------------
  394.                                 =Responsive Structure
  395. -----------------------------------------------*/
  396. @media (max-width: 650px) {
  397.         /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
  398.         body, input, textarea {
  399.                 font-size: 10px;
  400.         }
  401.         #site-title a {
  402.                 font-size: 24px;
  403.         }
  404.         #site-description {
  405.                 font-size: 10px;
  406.         }
  407.         #access ul {
  408.                 font-size: 10px;
  409.         }
  410.         .entry-title {
  411.                 font-size: 20px;
  412.         }
  413.                
  414.         /* Reposition the site title and description slightly */
  415.         #site-title {
  416.                 padding: 5.30625em 0 0;
  417.         }
  418.         #site-title,
  419.         #site-description {
  420.                 margin-right: 0;
  421.         }
  422. }