Jump to content

Change Background in css file


bnbd
 Share

Recommended Posts

hi everyone. I am new to CSS. how do i change the background color to either another color of to a image file that repeats itself. here is the stylesheet. i also attached it in case it doesn't read well the way i pasted it into this box. Thanks for the help html {overflow: -moz-scrollbars-vertical;margin: 0;padding: 0;}* {font-family: Arial, Helvetica, sans-serif;}body {margin: 0px;padding: 0px;text-align: center;}body, td, th, input, textarea, select, a {font-size: 12px;}form {padding: 0;margin: 0;display: inline;}input, textarea, select {margin: 3px 0px;}a, a:visited {color: #1B57A3;text-decoration: underline;cursor: pointer;}a:hover {text-decoration: none;}a img {border: none;}p {margin-top: 0px;}/* layout */#container {width: 960px;margin-left: auto;margin-right: auto;text-align: left;}#header .div2 {float: left;padding-top: 15px;padding-left: 15px;}#header .div3 {float: right;padding-top: 7px;height: 38px;}#header .div3 a {margin-left: 15px;padding: 1px 0px 2px 20px;background-repeat: no-repeat;background-position: left center;}#header .div4 {width: 510px;clear: right;float: right;height: 32px;padding-right: 14px;}#header .div4 a {float: left;margin-right: 2px;width: 100px;height: 18px;padding-top: 9px;padding-bottom: 9px;background: url('../image/tab_1.png') no-repeat;text-align: center;color: #333333;text-decoration: none;font-size: 14px;font-weight: bold;position: relative;z-index: 1;}#header .div4 a.selected {background: url('../image/tab_2.png') no-repeat;color: #FFF;padding-bottom: 10px;z-index: 3;}#header .div5 {clear: both;}#header .div5 .left {background: url('../image/header_1_left.png') no-repeat;width: 5px;height: 40px;float: left;}#header .div5 .right {background: url('../image/header_1_right.png') no-repeat;width: 5px;height: 40px;float: right;}#header .div5 .center {background: url('../image/header_1_center.png') repeat-x;height: 40px;margin-left: 5px;margin-right: 5px;}#header .div6 {clear: both;margin-bottom: 10px;}#header .div6 .left {background: url('../image/header_2_left.png') no-repeat;width: 5px;height: 32px;float: left;}#header .div6 .right {background: url('../image/header_2_right.png') no-repeat;width: 5px;height: 32px;float: right;}#header .div6 .center {background: url('../image/header_2_center.png') repeat-x;height: 32px;margin-left: 5px;margin-right: 5px;padding-left: 5px;padding-right: 5px;}#header .div7 {float: right;padding-top: 2px;}#header .div8 {float: left; margin-top: 6px;}#header .div9 {float: left;}#header .div10 {float: left; margin-top: 2px; }#search {padding-top: 7px;padding-left: 5px;color: #FFF;font-weight: bold;}#search select {border: 1px solid #0A5391;padding: 1px;}#search a {color: #FFF;}#search input {border: 1px solid #0A5391;padding: 2px;}#breadcrumb {float: left;padding-top: 7px;padding-bottom: 11px;height: 13px;margin-bottom: 10px;color: #000000;}.switcher {float: right; margin-top: 3px;margin-left: 10px;}.switcher a {text-decoration: none;display: block;}.switcher .selected {background: #FFFFFF url('../image/switcher.png') repeat-x;}.switcher .selected a {border: 1px solid #CCCCCC;background: url('../image/arrow_down.png') 116px center no-repeat;color: #666666;padding: 2px 5px 2px 5px;width: 121px;}.switcher .selected a:hover {background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;}.switcher .option { position: absolute;z-index: 3;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;background-color: #EEEEEE;display: none;width: 131px;}.switcher .option a {color: #000;padding: 3px 5px 3px 5px;}.switcher .option a:hover {background: #FFC;}.switcher img {position: relative;top: 1px;}#column_left {float: left;width: 180px;margin-right: 10px;clear: left;}#column_right {float: right;width: 180px;margin-left: 10px;clear: right;}#content {margin-left: 190px;margin-right: 190px;margin-bottom: 10px;}#content .top .left {background: url('../image/content_top_left.png') no-repeat;width: 5px;height: 32px;float: left;}#content .top .right {background: url('../image/content_top_right.png') no-repeat;width: 5px;height: 32px;float: right;}#content .top .center {background: url('../image/content_top_center.png') repeat-x;margin-left: 5px;margin-right: 5px;}#content .top h1, .heading {padding: 8px 0px 8px 7px;}#content h1, .heading {color: #000000;font-size: 14px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;text-transform: uppercase;margin: 0px;}#content .middle {border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background: #FFFFFF;padding: 10px 10px 1px 10px;min-height: 30px;}#content .bottom .left {background: url('../image/content_bottom_left.png') no-repeat;width: 5px;height: 5px;float: left;}#content .bottom .right {background: url('../image/content_bottom_right.png') no-repeat;width: 5px;height: 5px;float: right;}#content .bottom .center {background: url('../image/content_bottom_center.png') repeat-x;height: 5px;margin: 0 5px 10px 5px;}.box {margin-bottom: 10px;background: url('../image/box_top.png') no-repeat;}.box .top {padding: 8px 0px 8px 7px;color: #000000;font-size: 14px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;text-transform: uppercase;}.box .top img {float: left;margin-right: 5px;}.box .middle {border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background: #FFFFFF;padding: 10px;}.box .bottom {height: 5px;background: url('../image/box_bottom.png') no-repeat;}.success {padding: 5px 0px;margin-bottom: 10px;background: #E4F1C9;border: 1px solid #A5BD71;font-size: 11px;font-family: Verdana, Geneva, sans-serif;text-align: center;}.warning {padding: 5px 0px;margin-bottom: 10px;background: #FFDFE0;border: 1px solid #FF9999;font-size: 11px;font-family: Verdana, Geneva, sans-serif;text-align: center;}.wait {padding: 5px 0px;margin-bottom: 10px;background: #FBFAEA;border: 1px solid #EFEBAA;font-size: 11px;font-family: Verdana, Geneva, sans-serif;text-align: center;}.required {color: #FF0000;font-weight: bold;}.error {color: #FF0000;display: block;}.help {cursor: pointer;}.tooltip {border: 1px solid #FDDA5C;background: #FBFF95;padding: 5px;font-size: 11px;width: 250px;}.clear { /* generic container (i.e. div) for floating buttons */overflow: hidden;width: 100%;}.button {padding-left: 8px;display: inline-block;margin-right: 5px;background: url('../image/button_left.png') top left no-repeat;text-decoration: none;color:#FFF;}.button span {color: #FFF;display: block;padding: 4px 12px 5px 5px;background: url('../image/button_right.png') top right no-repeat;}.buttons {background: #F8F8F8;border: 1px solid #DDDDDD;padding: 5px;margin-bottom: 10px;}.buttons input {padding: 0px;margin: 0px;}.buttons table {width: 100%;border-collapse: collapse;}.buttons table td {vertical-align: middle;}.content {background: #F7F7F7;border: 1px solid #DDDDDD;padding: 10px;margin-top: 3px;margin-bottom: 10px;}.list {margin-bottom: 10px;width: 100%;}.list td {text-align: center;vertical-align: top;padding-bottom: 10px;}.sort {margin-bottom: 10px;background: #F8F8F8;height: 30px;width: 100%;}.sort .div1 {float: right;margin-left: 5px;padding-top: 6px;padding-right: 9px;}.sort .div2 {text-align: right;padding-top: 9px;}.sort select {font-size: 11px;margin: 0;padding: 0;}.pagination {display: inline-block;width: 100%;background: #F8F8F8;margin-bottom: 10px;}.pagination .links, .pagination .results {padding: 7px;}.pagination .links {float: left;}.pagination .links a {border: 1px solid #CCCCCC;padding: 4px 7px;text-decoration: none;color: #000000;}.pagination .links b {border: 1px solid #CCCCCC;padding: 4px 7px;text-decoration: none;color: #000000;background: #FFFFFF;}.pagination .results {float: right;}.tabs {width: 100%;height: 31px;margin-bottom: 0px;}.tabs a {float: left;display: block;padding: 6px 15px 7px 15px;margin-right: 2px;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #DDDDDD;border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background: #FFFFFF url('../image/tab_3.png') repeat-x;color: #000000;font-weight: bold;font-size: 13px;text-decoration: none;z-index: 1;position: relative;top: 1px;}.tabs a.selected {background: #FFFFFF url('../image/tab_3.png') repeat-x;border-bottom: 0px;padding-bottom: 8px;z-index: 3;}.tab_page {border: 1px solid #DDDDDD;background: #FFFFFF;padding: 10px;display: block;z-index: 2;margin-bottom: 10px;}#footer {width: 100%;clear: both;padding-top: 5px;border-top: 1px solid #DDDDDD;}#footer .div1 {float: left;text-align: left;}#footer .div2 {float: right;text-align: right;}#category ul {margin-top: 0px;margin-bottom: 0px;margin-left: 8px;padding-left: 12px;list-style: url('../image/bullet_1.png');}#information ul {margin-top: 0px;margin-bottom: 0px;margin-left: 8px;padding-left: 12px;list-style: url('../image/bullet_2.png');}.cart {border-collapse: collapse;width: 100%;border: 1px solid #EEEEEE;margin-bottom: 10px;}.cart th {background: #EEEEEE;padding: 5px;font-weight: normal;}.cart td {padding: 5px;}.tags, .tags a {font-style: italic;font-size: x-small;}#module_cart .middle {padding: 5px;}.cart_module_total {padding: 0 3px 0 3px;font-size: 0.9em; color: #222;}.cart_remove {margin-top: 3px;background: url('../image/list_remove_btn.gif') no-repeat left center transparent;padding-right:10px;cursor:pointer;}.cart_remove_loading {margin-top: 3px;background: url('../image/ajax_load.gif') no-repeat transparent;padding-right:10px;}.button_add_small, a.button_add_small:visited {margin-top: 3px;background: url('../image/button_add_small.png') no-repeat left center transparent;padding:5px;text-decoration: none;cursor:pointer;}#content .middle .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .middle .box .middle {width: 158px;min-height: 0px;}

stylesheet.css

Link to comment
Share on other sites

css can only HOVER #elementYouWantToChangeBackground :hover {background-color:red;} otherwise you javascript (or jquery) js: document.getElementById('elementYouWantToChangeBackground').css.backgroundColor='red';Jq: $('#elementYouWantToChangeBackground').css({'backgroundColor':'red'});

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...