Re: “Change the x & y coordinates of the background image in CSS.”

[Anonymous]

HI @ChristopherBurton Yep, I’m sure you could. As you’ve noticed, I don’t have a lot of HTML/CSS experience. I’ve made tweaks to the site here and there on my own or with help from various sites, but I’m not a pro. I changed the CSS file back to normal and made the angles change to the Header.php. Below is the style.ccc file. Thanks for being patient. Sending in two parts because it’s too long.

/*

Theme Name: Periodic

Theme URI: http://www.wearepixel8.com/

Description: Periodic is a premium WordPress magazine theme that is highly customizable with 18 different color schemes to choose from. Tailor Periodic to your needs with 6 widgetized areas (home sidebar, left sidebar, right sidebar and three in the footer), 2 custom menus (2 in the header), 12 custom widgets, 3 page templates, streaming video integration and a host of theme options to personalise your environment. To modify your copy of Periodic, click on the Periodic Theme Options link, in the WordPress Admin sidebar.

Version: 2.2

Author: We Are Pixel8

Author URI: http://www.wearepixel8.com/

*/



/*

As of version 2.0, we recommend not making any edits to this file. If you wish to customize Periodic, please use the blank custom.css file to add your own style declarations and check the option in the Theme Options panel. You should retain a local copy of your custom.css file for backup.

*/



/***** Resets *****/

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td { margin: 0; padding: 0; border: 0; outline: none; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

:focus { outline: 0; }

body { line-height: 1; color: #000; background: #fff; }

img { border: 0; }

ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

a { outline: none; }



/***** @font-face Fonts *****/

@font-face { font-family: 'VollkornRegular'; src: url('fonts/Vollkorn-Regular-webfont.eot'); src: local('VollkornRegular'), url('fonts/Vollkorn-Regular-webfont.woff') format('woff'), url('fonts/Vollkorn-Regular-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Regular-webfont.svg#webfont2c9a8Pup') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'VollkornBold'; src: url('fonts/Vollkorn-Bold-webfont.eot'); src: local('VollkornBold'), url('fonts/Vollkorn-Bold-webfont.woff') format('woff'), url('fonts/Vollkorn-Bold-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Bold-webfont.svg#webfontnFUVHqaM') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'VollkornItalic'; src: url('fonts/Vollkorn-Italic-webfont.eot'); src: local('VollkornItalic'), url('fonts/Vollkorn-Italic-webfont.woff') format('woff'), url('fonts/Vollkorn-Italic-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Italic-webfont.svg#webfontNWDnMVvY') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'VollkornBoldItalic'; src: url('fonts/Vollkorn-BoldItalic-webfont.eot'); src: local('VollkornBoldItalic'), url('fonts/Vollkorn-BoldItalic-webfont.woff') format('woff'), url('fonts/Vollkorn-BoldItalic-webfont.ttf') format('truetype'), url('fonts/Vollkorn-BoldItalic-webfont.svg#webfontOcvOCEpg') format('svg'); font-weight: normal; font-style: normal; }



/***** Structure and Layout *****/

body { font: 62.5% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #666; }

#angles { position: relative; width: 100%; }

.inner-wrapper { position: relative; width: 960px; margin: 0 auto; }

#column-container { position: relative; width: 960px; background: #fff url(images/backgrounds/bg-sidebar.gif) repeat-y top right; padding: 20px 0 0; }

#column-container-left { position: relative; width: 960px; background: #fff url(images/backgrounds/bg-sidebar.gif) repeat-y top left; padding: 20px 0; }

#column-container-wide { position: relative; width: 960px; background: #fff; padding: 20px 0; }

#left-column, #right-column { position: relative; width: 640px; }

#right-sidebar, #left-sidebar { position: relative; width: 320px; }

#right-sidebar, #right-column { float: right; }

#left-column, #left-sidebar { float: left; }

.video-sidebar { position: relative; width: 300px; margin: 0 10px 20px; padding: 0 0 20px; border-bottom: 1px solid #d9d9d9; }



/***** Float Classes and Clear Float Fix *****/

.clear { display: inline-block; }

.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }

/* Hide from IE Mac */ .clear { display: block; } /* End hide from IE Mac */

.alignleft { float: left; }

.alignright { float: right; }



/***** Utility Banner *****/

#utility-banner { position: relative; width: 100%; background: #222 url(images/backgrounds/bg-gray.jpg); z-index: 198; }



/***** Utility Banner Navigation *****/

#utility-banner ul { position: relative; }

#utility-banner li { float: left; position: relative; line-height: 30px; }

#utility-banner li:hover { visibility: inherit; }

#utility-banner li a, #utility-banner li a:visited { font-size: 1.1em; font-weight: bold; text-decoration: none; display: block; text-transform: uppercase; margin: 0 20px 0 0; position: relative; }



/***** Utility Banner Dropdown Menu *****/

#utility-banner ul ul { position: absolute; top: -999em; width: 20em; background: #e6e6e6; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; margin: 0; }

#utility-banner ul ul li { clear: left; width: 100%; border-top: 1px solid #d9d9d9; line-height: 3em; }

#utility-banner ul ul li:first-child { border: none; }

#utility-banner ul ul li a, #utility-banner ul ul li a:visited { text-transform: capitalize !important; color: #323232;  padding: 0 10px; margin: 0;  }

#utility-banner ul ul li a:hover, #utility-banner ul ul li a:active { color: #fff !important; }



/***** Show Utility Banner Dropdown Menu *****/

#utility-banner ul li:hover ul, #utility-banner ul li.sfHover ul { top: 3em; left: -0.2em; z-index: 199; }



/***** Hide Utility Banner Flyout Navigation Level 1 - 3 *****/

#utility-banner ul ul li:hover ul, #utility-banner ul ul li.sfHover ul,

#utility-banner ul ul ul li:hover ul, #utility-banner ul ul ul li.sfHover ul,

#utility-banner ul ul ul ul li:hover ul, #utility-banner ul ul ul ul li.sfHover ul { top: -999em; }



/***** Show Utility Banner Flyout Navigation Level 1 - 3 *****/

#utility-banner ul ul li:hover ul, #utility-banner ul ul li.sfHover ul,

#utility-banner ul ul ul li:hover ul, #utility-banner ul ul ul li.sfHover ul,

#utility-banner ul ul ul ul li:hover ul, #utility-banner ul ul ul ul li.sfHover ul { top: 0; left: 20em; }



/***** Socialize Menu *****/

.socialize { float: right; }

.socialize li a { margin: 0 0 0 20px !important; }

.socialize .get-feed { background: url(images/backgrounds/bg-rss.png) no-repeat 0 9px; padding: 0 0 0 15px; }



/***** 728x90 Leaderboard Banner Ad *****/

#banner-728 { position: relative; display: block; width: 738px; height: 100px; margin: 20px auto; }

#banner-728 a img, #banner-728 a img:visited { display: block; border: 5px solid #fff; -webkit-transition: border .2s linear; transition: border .2s linear; }

#banner-728 a img:hover, #banner-728 a img:active { -webkit-transition: border .1.5s linear; transition: border .1.5s linear;  }