SHARE
TWEET

Different background images on pages

sine184 May 7th, 2012 162 Never
  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. }
RAW Paste Data
Top