Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

#86384
Anonymous
Inactive

@ChristopherBurton Is there a specific section you need? It’s 28 Word pages long and I can only fit about 3 page per post. Thanks


/***** Masthead *****/
#masthead { position: relative; width: 100%; padding: 20px 0; margin: 0 auto; }
.logo, .logo-text { float: left; margin: 10px 0 0 15px; }
color: #fff; font-weight: bold; text-decoration: none; font-size: 5em; letter-spacing: -0.05em; background: #222; padding: 5px 10px; display: block; line-height: 1; }
.logo-text a:hover, .logo-text a:active { background: #111; }
.logo a { display: block; }
.masthead-banner { position: relative; float: right; }
.masthead-banner a img, .masthead-banner a img:visited { display: block; border: 5px solid #fff; -webkit-transition: border .2s linear; transition: border .2s linear; }
.masthead-banner a img:hover, .masthead-banner a img:active { -webkit-transition: border .1.5s linear; transition: border .1.5s linear; }

/***** Sticky Header *****/
.sticky-control-wrapper { position: relative; width: 960px; height: 30px; margin: 0 auto 20px; }
#sticky-controls { position: absolute; top: 0; right: 10px; background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -837px; padding: 0 0 0 20px; display: inline-block; }
#sticky-controls h2 { color: #464646; font-size: 1.1em; line-height: 3em; background: url(images/backgrounds/bg-sticky-heading.png) repeat-x; padding: 0 40px 0 0; display: inline-block; margin: 0 20px 0 0; text-transform: uppercase; }
#sticky-controls p { position: absolute; top: 0; right: 0; }
.hide-sticky { display: block; width: 40px; height: 30px; background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -1077px; text-indent: -9999px; }
.show-sticky { background-position: 0 -1157px; }
#sticky-header { position: relative; width: 960px; margin: 0 auto; padding: 0 0 20px; }
#trending-wrapper { position: relative; width: 960px; height: 140px; overflow: hidden; }
.sticky-post { position: relative; width: 220px; height: 110px; padding: 0 0 10px; background: url(images/backgrounds/bg-stickyshadow.png) no-repeat left bottom; margin: 0 10px 20px; float: left; }
.sticky-wrap { position: relative; width: 220px; height: 110px; overflow: hidden; }
.sticky-thumb img { display: block; border: 5px solid #fff; position: absolute; left: 0; top: 0; }
.sticky-text { position: absolute; background: url(images/backgrounds/bg-sticky-text.png); left: 5px; top: 110px; width: 190px; height: 80px; padding: 10px; }
.sticky-title { position: relative; width: 128px; float: left; background: url(images/backgrounds/bg-sticky-title.png) repeat-y top right; padding: 10px 12px 15px 10px; }
.sticky-comments { float: right; margin: 10px 0 0; }
.sticky-text h3 a, .sticky-text h3 a:visited { color: #e0e0e0; font-size: 1.2em; line-height: 1.4em; text-decoration: none; }
.sticky-text h3 a:hover, .sticky-text h3 a:active { color: #fff; }
.sticky-comments a, .sticky-comments a:visited { color: #e0e0e0; text-decoration: none; background: url(images/backgrounds/comment-bubble.png) no-repeat left center; padding: 0 0 0 15px; font-size: 1.2em; font-weight: bold; }
.sticky-comments a:hover, .sticky-comments a:active { color: #fff; }
.hot-topic { display: block; text-indent: -9999px; width: 30px; height: 30px; position: absolute; bottom: 0; left: 0; z-index: 189; }
.video-article { display: block; text-indent: -9999px; width: 35px; height: 35px; position: absolute; top: 5px; left: 5px; z-index: 190; }
.sticky-wrap .video-article { top: 0; left: 0; }
.trending-nav { display: block; width: 70px; height: 30px; margin: 0 445px; }
.trending-nav li { float: left; }
.trending-nav #prev, .trending-nav #next { display: block; width: 30px; height: 30px; text-indent: -9999px; }
.trending-nav #prev { background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -997px; margin: 0 5px 0 0; }
.trending-nav #next { background: url(images/backgrounds/periodic-sprite-02.png) no-repeat 0 -917px; margin: 0 0 0 5px; }

/***** Main Nav Bar *****/
#mainnav-bar { position: relative; width: 960px; margin: 0 auto; background: #fcfcfc url(images/backgrounds/bg-main-nav.jpg) repeat-x bottom left; border: 1px solid #d9d9d9; z-index: 98; }

/***** Main Navigation *****/
#mainnav-bar ul { position: relative; float: left }
#mainnav-bar li { float: left; background: url(images/backgrounds/pipe-mainnav.gif) repeat-y top right; line-height: 40px; position: relative; }
#mainnav-bar li:hover { visibility: inherit; }
#mainnav-bar li a, #mainnav-bar li a:visited { display: block; color: #464646; font-size: 1.3em; font-weight: bold; padding: 0 15px; text-decoration: none; position: relative; }
#mainnav-bar li a:hover, #mainnav-bar li a:active { color: #fff; background: #464646 url(images/backgrounds/bg-main-nav-hover.png) repeat-x top left; }

/***** Main Navigation Dropdown Menu *****/
#mainnav-bar 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; background-image: none; margin: 0; }
#mainnav-bar ul ul li { clear: left; width: 100%; border-top: 1px solid #d9d9d9; padding: 0; background-image: none !important; line-height: 3em; }
#mainnav-bar ul ul li:first-child { border: none; }
#mainnav-bar ul ul li a, #mainnav-bar ul ul li a:visited { font-size: 1.1em !important; color: #323232; background-image: none !important; }
#mainnav-bar ul ul li a:hover, #mainnav-bar ul ul li a:active { background: #1b1b1b; color: #fff !important; }

/***** Show Main Navigation Dropdown Menu *****/
#mainnav-bar ul li:hover ul, #mainnav-bar ul li.sfHover ul { top: 4.1em; left: 0; z-index: 99; }

/***** Hide Main Navigation Flyout Navigation Level 1 - 3 *****/
#mainnav-bar ul ul li:hover ul, #mainnav-bar ul ul li.sfHover ul,
#mainnav-bar ul ul ul li:hover ul, #mainnav-bar ul ul ul li.sfHover ul,
#mainnav-bar ul ul ul ul li:hover ul, #mainnav-bar ul ul ul ul li.sfHover ul { top: -999em; }

/***** Show Main Navigation Flyout Navigation Level 1 - 3 *****/
#mainnav-bar ul ul li:hover ul, #mainnav-bar ul ul li.sfHover ul,
#mainnav-bar ul ul ul li:hover ul, #mainnav-bar ul ul ul li.sfHover ul,
#mainnav-bar ul ul ul ul li:hover ul, #mainnav-bar ul ul ul ul li.sfHover ul { top: 0; left: 20em; }

/***** Main Navigation Current Menu Item Highlighting *****/
#mainnav-bar ul li:hover, #mainnav-bar ul li.sfHover:hover { background: url(images/backgrounds/pipe-mainnav.gif) repeat-y top right; }
#mainnav-bar ul ul li:hover, #mainnav-bar ul ul li.sfHover:hover { background: #d5d5d5; background-image: none; }