#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    27
    Rep Power
    0

    Learning but need a little help


    Hello;
    I am stuck on what is probably an easy thing but would greatly appreciate any help.
    My style.css file calls an image for the background of my site and I just want to change the image to a color of my choice:
    #8099cc
    I have bolded the code below. Can someone please show me how to replace the background with a color?

    I included the entire css file..i hope thta's not overkill.
    Thank you very much in advance!


    @import "fonts/bebas.css";
    @import "fonts/droidsans.css";
    @import "fonts/mavenpro.css";
    @import "fonts/metrophobic.css";
    @import "fonts/ubuntu.css";
    @import "fonts/ubuntu.css";
    @import "fonts/helvetica.css";
    body {
    background: url("images/mainweb-bg.jpg") repeat-x scroll center top #29769B;
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    a {
    color: #2A9FD4;
    text-decoration: none;
    }
    a:hover {
    color: #F69C35;
    text-decoration: underline;
    }
    .clear {
    clear: both;
    }
    .float-left {
    float: left;
    }
    .float-right {
    float: right;
    }
    #block-toolbar {
    background: url("images/toolbar.png") repeat-x scroll 0 0 transparent;
    height: 39px;
    }
    #toolbar {
    margin: 0 auto;
    width: 960px;
    }
    #toolbar, #toolbar a {
    color: #C1E1F1;
    }
    #toolbar a:hover {
    color: #222224;
    }
    #toolbar {
    font-size: 12px;
    line-height: 24px;
    padding: 5px;
    }
    .showtime {
    color: #FFFFFF;
    float: left;
    font-weight: bold;
    width: 200px;
    }
    #top-nav {
    float: left;
    margin-left: 30px;
    }
    #topmenu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    #topmenu li {
    float: left;
    list-style: disc outside url("images/bullet.png");
    margin: 0 15px 0 0;
    position: relative;
    }
    #topmenu li a {
    color: #FFFFFF;
    font-size: 12px !important;
    font-weight: bold;
    margin: 0;
    padding: 5px 10px 12px 0 !important;
    text-decoration: none;
    }
    #topmenu li a:hover {
    color: #FFFFFF;
    }
    #wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }
    #header {
    width: 100%;
    }
    #logo {
    background: url("images/logo.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 98px;
    margin-top: 10px;
    text-indent: -9999em;
    width: 371px;
    }
    #contactnumber {
    float: right;
    margin: 15px 0 0;
    width: 220px;
    }
    .contact_cal {
    color: #3E6E85;
    font-family: 'BebasNeueRegular';
    font-size: 25px;
    text-align: right;
    text-transform: uppercase;
    }
    .contact_nm {
    background: url("images/phone-ico.png") no-repeat scroll left center transparent;
    color: #000000;
    font-family: 'BebasNeueRegular';
    font-size: 32px;
    height: 49px;
    line-height: 50px;
    padding-left: 55px;
    text-align: left;
    text-transform: uppercase;
    }
    #main-nav {
    background: url("images/main_nav_bg.png") no-repeat scroll 0 0 transparent;
    height: 50px;
    }
    #content {
    margin-top: 10px;
    }
    .leftcolumn {
    float: left;
    width: 710px;
    }
    .leftcolumn-home {
    float: left;
    width: 962px;
    }
    .fullcolumn {
    float: left;
    width: 100%;
    }
    small {
    font-size: 13px;
    }
    .inner_content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    padding: 30px;
    }
    .inner_content h1 {
    color: #444446;
    font-family: 'BebasNeueRegular';
    font-size: 42px;
    font-weight: normal;
    margin: 5px 0 15px;
    padding: 0;
    }
    .inner_content h2 {
    color: #29769B;
    font-family: 'BebasNeueRegular';
    font-size: 30px;
    font-weight: normal;
    margin: 10px 0 0;
    padding: 15px 0 5px;
    }
    .inner_content h3 {
    color: #29769B;
    font-family: 'BebasNeueRegular';
    font-size: 24px;
    font-weight: normal;
    margin: 10px 0 0;
    padding: 15px 0 0;
    }
    .entry {
    color: #555555;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    }
    .entry ul {
    list-style: none outside none;
    margin: 10px 0 20px 25px;
    padding: 0;
    }
    .entry li {
    line-height: 24px;
    list-style: disc outside url("images/bullet.gif");
    }
    .entry li a {
    color: #666666;
    }
    .entry ol {
    margin: 0;
    padding: 0;
    }
    #main_banner {
    background-image: url("images/mainbg.png");
    height: 379px;
    margin-bottom: 10px;
    width: 960px;
    }
    #main_banner h2 {
    font-family: 'BebasNeueRegular';
    font-size: 22px;
    font-weight: normal !important;
    margin: 25px 0 10px;
    text-transform: uppercase;
    }
    #our_clients {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    float: left;
    margin-right: 10px;
    min-height: 300px;
    padding: 7px 5px;
    width: 226px;
    }
    #our_clients h2 {
    background: url("images/review-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 15px 40px;
    }
    #our_reviews {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    float: left;
    margin-right: 10px;
    min-height: 324px;
    padding: 7px 5px;
    width: 226px;
    }
    #our_reviews h2 {
    background: url("images/review-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 10px 0 19px 55px;
    }
    #our_fb {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    float: left;
    margin-left: 10px;
    min-height: 323px;
    padding: 7px 5px;
    width: 226px;
    }
    #our_fb h2 {
    background: url("images/review-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 15px 40px;
    }
    #our_portfolio {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    float: left;
    min-height: 336px;
    padding-top: 2px;
    width: 460px;
    }
    #our_portfolio p {
    font-size:12px;
    line-height:18px;
    padding:0 15px;
    }
    #our_services {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    margin-top: 10px;
    min-height: 300px;
    padding: 5px;
    }
    .web-designing {
    float: left;
    margin-right: 6px;
    width: 225px;
    }
    .web-development {
    float: left;
    margin-right: 6px;
    width: 225px;
    }
    .internet-marketing {
    float: left;
    width: 225px;
    }
    .web-designing p, .web-development p, .internet-marketing p {
    color: #777777;
    font-size: 12px;
    line-height: 20px;
    padding-left: 12px;
    width: 200px;
    }
    .web-designing h2 {
    background: url("images/webdesign-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 18px 0 15px 45px !important;
    }
    .web-development h2 {
    background: url("images/webdevelopment-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 8px 0 0;
    padding: 10px 0 15px 50px !important;
    }
    .internet-marketing h2 {
    background: url("images/internet-ico.gif") no-repeat scroll 0 0 transparent;
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 8px 0 0;
    padding: 10px 0 15px 50px !important;
    }
    #read_more_btn {
    background: url("images/read_more.gif") no-repeat scroll 0 0 transparent;
    display: block;
    height: 30px;
    margin: 0 0 0 12px;
    text-indent: -9999em;
    width: 99px;
    }
    #our_tech {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    margin-bottom: 15px;
    margin-top: 10px;
    min-height: 96px;
    padding: 5px 0 0;
    }

    #sidebar {
    float: right;
    width: 240px;
    }
    #sidebar h2 {
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    }
    #sidebar ul, #sidebar ul ol {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    #sidebar ul li {
    margin-bottom: 15px;
    }
    #sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }
    #sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }
    ol li, #sidebar ul ol li {
    list-style: decimal outside none;
    }
    #sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
    .widget {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7FB7D1;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #7CAFC7;
    margin-bottom: 0;
    margin-top: 10px;
    width: 238px;
    }
    .widgettitle {
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    }
    .widget_rss h2 {
    color: #2A9FD4;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 18px !important;
    font-weight: normal;
    margin: 15px 0 0 10px !important;
    padding: 0;
    }
    .widget_rss li {
    font-size: 13px !important;
    list-style: disc outside url("images/currect_sign.gif");
    margin: 0 0 10px 25px !important;
    padding: 0;
    }
    .widget_rss li a {
    color: #777777 !important;
    }
    .rsswidget img {
    display: none !important;
    }
    #hotfeatures {
    padding: 0;
    }
    #hotfeatures h2 {
    color: #636363;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 24px;
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 0 #FFFFFF;
    }
    #hottitle {
    background: url("images/sidebar_title_bg.gif") no-repeat scroll 0 0 transparent;
    height: 64px;
    margin: 1px 0 0 2px;
    padding: 10px 0 0 15px;
    }
    .sub_heading {
    color: #A7A7A7;
    font-family: 'HelveticaLTStdCondensed';
    font-size: 11px;
    }
    #hotfeatures ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    #hotfeatures li {
    color: #8E8E8E;
    font-size: 13px;
    line-height: 25px;
    list-style: disc outside url("images/currect_sign.gif");
    margin: 0 0 0 25px !important;
    }
    #request_quote {
    background: url("images/request-quote.gif") no-repeat scroll 0 0 transparent;
    display: block;
    height: 46px;
    margin: 10px 0 10px 30px;
    text-indent: -9999em;
    width: 174px;
    }
    .widget_tbtestimonialswidget {
    margin-top: -7px;
    min-height: 250px;
    padding: 6px 0 0 8px;
    width: 230px !important;
    }
    .widget_tbtestimonialswidget h2 {
    background: url("images/review-ico.gif") no-repeat scroll left center transparent;
    height: 32px;
    padding: 10px 0 0 50px !important;
    }
    .wap8_moneyback_widget {
    padding: 0;
    }
    .wap8_moneyback_widget h2 {
    background: url("images/moneyback.gif") no-repeat scroll left top transparent;
    color: #777777 !important;
    font-size: 22px !important;
    height: 62px;
    padding: 15px 0 0 75px !important;
    text-transform: uppercase;
    }
    .moneyback {
    color: #777777;
    font-size: 12px;
    line-height: 20px;
    min-height: 200px;
    padding: 5px 10px 0 15px;
    }
    #footer {
    background-color: #1D4171;
    border-bottom: 1px solid #003366;
    margin: 15px 0 0;
    overflow: hidden;
    width: 100%;
    }
    .footerleft {
    float: left;
    margin-right: 5%;
    width: 30%;
    }
    .footerleft ul {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    list-style: none outside none;
    padding: 0;
    }
    .footerleft li {
    padding: 5px 0;
    }
    .footerleft a {
    color: #F69C35;
    }
    .footercenter {
    float: left;
    margin-right: 5%;
    width: 25%;
    }
    .footerright {
    float: left;
    width: 30%;
    }
    .footer_nav {
    background: url("images/footer-bg.png") repeat-x scroll center bottom transparent;
    }
    .footer_nav_left {
    float: left;
    padding: 20px 0 10px;
    width: 60%;
    }
    .footermenu {
    }
    .footermenu ul {
    list-style: none outside none !important;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    .footermenu li {
    background: url("images/seprator.gif") no-repeat scroll right center transparent;
    float: left;
    font-size: 13px !important;
    list-style: none outside none !important;
    margin: 0 0 5px;
    padding: 0 10px !important;
    }
    .footermenu li a {
    color: #5DC6F2;
    font-weight: normal;
    text-decoration: none;
    }
    .footermenu li a:hover {
    color: #FFFFFF;
    }
    #menu-item-44, #menu-item-43 {
    background: none repeat scroll 0 0 transparent !important;
    }
    .copyright {
    color: #FFFFFF;
    float: right;
    font-size: 11px !important;
    padding-top: 19px;
    text-align: right;
    width: 37%;
    line-height: 16px;
    }
    #wpcf7-f205-p20-o1 {
    border: 1px solid #DDDDDD;
    margin-top: 15px;
    padding: 10px;
    width: 640px;
    }
    #wpcf7-f205-p20-o1 .wpcf7-text, .wpcf7-file {
    background: url("images/field_bg.gif") repeat-x scroll center top transparent;
    border: 1px solid #CBCBCB;
    padding: 5px;
    }
    #wpcf7-f205-p20-o1 .wpcf7-select {
    background: url("images/field_bg.gif") repeat-x scroll center top transparent;
    border: 1px solid #CBCBCB;
    padding: 5px;
    width: 284px !important;
    }
    #wpcf7-f205-p20-o1 textarea {
    background: url("images/field_bg.gif") repeat-x scroll center top transparent;
    border: 1px solid #CBCBCB;
    font-weight: bold;
    height: 200px;
    padding-left: 8px;
    width: 603px;
    }
    #wpcf7-f205-p20-o1 p {
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-right: 15px;
    }
    .wpcf7-checkbox {
    margin-right: 50px;
    width: 360px !important;
    }
    .wpcf7-submit {
    background: url("images/submit-request.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 43px;
    text-indent: -9999em;
    text-transform: uppercase;
    width: 170px;
    }
    .my-page-table {
    width: 100%;
    }
    .my-page-table .odd {
    background-color: #CCCCCC;
    }
    ul.checkmark {
    float: left;
    padding: 0;
    width: 100%;
    }
    ul.checkmark li {
    background: url("images/checkmark.png") no-repeat scroll left top transparent;
    font-size: 12px;
    list-style: none outside none;
    margin: 0;
    padding: 2px 0 2px 20px;
    }
    .clients_ar {
    background: url("images/sca-icon.png") no-repeat scroll 0 0 transparent;
    height: 41px !important;
    width: 214px !important;
    }
    #banner_callout {
    float: left;
    padding: 30px 10px 0 20px;
    width: 210px;
    }
    .servicesmenu {
    list-style: none outside none !important;
    padding: 0;
    text-decoration: none !important;
    }
    .servicesmenu a {
    color: #FFFFFF !important;
    font-size: 12px;
    line-height: 20px;
    list-style: none outside none !important;
    text-decoration: none !important;
    }
    .callus {
    color: #FFFFFF;
    font-size: 15px;
    padding-left: 20px;
    }
    ul#menu-footer-menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
    .alignnone {
    margin:5px 20px 20px 0;
    }

    .aligncenter,
    div.aligncenter {
    display:block;
    margin:5px auto;
    }

    .alignright {
    float:right;
    margin:5px 0 20px 20px;
    }

    .alignleft {
    float:left;
    margin:5px 20px 20px 0;
    }

    .aligncenter {
    display:block;
    margin:5px auto;
    }

    a img.alignright {
    float:right;
    margin:5px 0 20px 20px;
    }

    a img.alignnone {
    margin:5px 20px 20px 0;
    }

    a img.alignleft {
    float:left;
    margin:5px 20px 20px 0;
    }

    a img.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    remove everything from that bolded code except #29769B
    so it should like like
    Code:
    background: #29769B;
    and then to make it the color you want chnge that value to the one you want



    thatis 1 very large css file, i recomend cutting it into a few different css files instead of just 1 as it is large so it will be easier to manange

    one more thing, next time use the CODE tags to sorround your code so its easier to read
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    27
    Rep Power
    0

    Thanks Man


    Jack;
    Thank you for the speedy reply and answer/suggestion. That definitely helps. This will be a good learning experience for me cutting up the css.
    Appreciate it,
    Paul


    Originally Posted by jack13580
    remove everything from that bolded code except #29769B
    so it should like like
    Code:
    background: #29769B;
    and then to make it the color you want chnge that value to the one you want



    thatis 1 very large css file, i recomend cutting it into a few different css files instead of just 1 as it is large so it will be easier to manange

    one more thing, next time use the CODE tags to sorround your code so its easier to read
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by jack13580
    thatis 1 very large css file, i recomend cutting it into a few different css files instead of just 1 as it is large so it will be easier to manange
    I disagree. Fewer stylesheets is a good thing, mainly for performance reasons but can also help debugging be less painful.

    Comments on this post

    • aeternus agrees : less header requests ftw!
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo