Viewing 4 replies - 1 through 4 (of 4 total)
  • BB,
    Create your gradient image (view http://fashionbombdaily.com/wp-content/themes/fb/i/bg.jpg ) for reference. Create an images folder (if it does not currently exist in your theme directory (where your style.css lives) and upload your image here (this is assuming you have ftp access to your theme folder).

    Then, in your style.css, add the following to the end:

    body{
    background: #fff url ('images/myimage.jpg') repeat-x top left;
    }

    (Change #fff to whatever your background color will be based on your image)

    if you don’t have ftp access as above, you can link to wherever the image lives as:

    body{
    background:#fff url('http://example.com/images/image.jpg') repeat-x top left;
    }

    Visit http://www.w3schools.com/css/tryit.asp?filename=trycss_background for more info

    Thread Starter BBombshell

    (@bbombshell)

    Hi jakep_sf,

    Thanks for your reply. I tried what you said, but no change ever happened. So, I tried moving the code up to replace the “body” section, and still, nothing. Here is my code as it is now (I apologize for the lengthiness):

    /* HTML Elements */
    * {
    margin:0;
    padding:0;
    }

    body {
    background: #119 url (‘images/gradient.png’) repeat-x top left;
    }

    p {
    margin: 15px 0;
    }

    a:link, a:visited {
    color: #3c78a7;
    text-decoration:none
    }

    a:hover, a:active {
    color: #3c78a7;
    text-decoration:underline;
    }

    a img {
    border:0;
    }

    code {
    font: 1.0em ‘Courier New’, Courier, Fixed;
    background:#ececec;
    }

    acronym, abbr, span.caps {
    font-size: 0.9em;
    letter-spacing: .07em;
    cursor: help;
    }

    acronym, abbr {
    border-bottom: 1px dashed #999;
    }

    blockquote {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #eee;
    font:1.0em Arial;
    line-height:1.5em;
    margin:10px 0px;
    }

    select {
    width: 130px;
    }

    /* Structure */

    #head {
    width:960px;
    margin:0px auto;
    margin-top:15px;
    padding:0px;
    font-size:0.7em;
    }

    #page {
    width:940px;
    margin:0px auto;
    padding:10px;
    background:#ececec;
    font-size:0.7em;
    }

    .left, .alignleft {
    float:left;
    }

    .right, .alignright {
    float:right;
    }

    /* Navigation Bar*/
    #navbar {
    margin:0 auto;
    margin-top:15px;
    padding:0px 10px;
    text-transform:uppercase;
    background:#2c2c2c url(images/navbar.png);
    }

    #page-bar {
    width:722px;
    }

    #page-bar ul {
    list-style: none;
    }

    #page-bar li {
    float:left;
    list-style:none;
    cursor: pointer;
    display:block;
    border-right:1px solid #333;
    }

    #page-bar li:hover {
    background: #3c78a7;
    }

    #page-bar a, #page-bar a:visited {
    margin: 0px;
    padding:10px 16px;
    font-weight:bold;
    color:#FFF;
    display:block;
    }

    #page-bar a:hover {
    text-decoration:none;
    display:block;
    }

    #searchform {
    width:194px;
    float:right;
    text-align:right;
    padding-top:8px;
    margin-right:10px;
    }

    /* Dropdown Menus */
    #page-bar li {
    float: left;
    margin: 0px;
    padding: 0px;
    }

    #page-bar li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 122px;
    text-transform:none;
    }

    #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    background: #2B2B2B;
    width: 122px;
    float: none;
    margin: 0px;
    padding: 5px 10px 5px 18px;
    border-top: 1px solid #C0C0C0;
    }

    #page-bar li li a:hover, #page-bar li li a:active {
    background: #666666;
    padding: 5px 10px 5px 18px;
    }

    #page-bar li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #page-bar li:hover ul {
    left: auto;
    display: block;
    }

    #page-bar li:hover ul, #page-bar li.sfhover ul {
    left: auto;
    }

    /* Text*/

    h1 {
    font:3.5em Arial;
    font-weight:bold;
    letter-spacing:-0.08em;
    }

    h2 {
    font:2.3em Georgia, “Times New Roman”;
    }

    h3 {
    font:1.3em Arial;
    margin-bottom:3px;
    color:#3c78a7;
    font-weight:bold;
    }

    h4 {
    font:1.0em Arial;
    }

    h3.cat_title, h3.cat_title a {
    color:#333;
    letter-spacing:-0.05em;
    font-size:0.85em;
    }

    h3#respond {
    margin-top:0px;
    padding-top:20px;
    }

    h3#comments {
    margin-top:32px;
    padding-left:0px;
    }

    h3.authors {
    margin-top:15px;
    }

    /* Index Page*/

    #logo {
    width:350px;
    }

    #tagline {
    margin-top:5px;
    font-size:1em;
    color:#333;
    }

    #top {
    padding:0;
    }

    #headline {
    width:590px;
    float:left;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.5em;
    margin:0;
    }

    #headline div.title {
    font-weight:bold;
    font:2.4em Georgia;
    letter-spacing:-0.05em;
    display:block;
    padding-bottom:5px;
    }

    #headline div.meta {
    display:block;
    margin-top:-5px;
    padding-bottom:2px;
    }

    #headline p {
    padding-bottom:15px;
    }

    #featured {
    width:300px;
    background:#fff;
    float:right;
    padding:10px 10px 9px 10px;
    }

    #featured .clearfloat {
    margin-top:7px;
    margin-bottom:8px;
    }

    #featured .info {
    margin-top:5px;
    padding-top:5px;
    float:right;
    width:180px;
    }

    #featured .title {
    font-weight:bold;
    }

    #headline a img, #featured a img {
    border:1px solid #ccc;
    margin-top:5px;
    margin-right:10px;
    padding:2px;
    }

    #middle {
    width: 920px;
    background:#fff;
    float:right;
    padding:10px;
    margin:10px 0;
    }

    .category {
    width:164px;
    float:left;
    border-top:8px solid #333;
    margin:0px;
    padding:5px 10px 10px 10px;
    background:#fff;
    }

    .category p {
    margin:0;
    }

    #cat-1, #cat-3, #cat-5 {border-top:8px solid #333333;}
    #cat-2, #cat-4 {border-top:8px solid #3c78a7;}

    .category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
    text-transform:lowercase;
    margin:0;
    font-weight:bold;
    font-size:1.5em;
    letter-spacing:-0.05em;
    }

    #front-popular h3 {
    color:#fff;
    }

    .category a {
    color:#333;
    display:block;
    background:none;
    }

    .category a:hover {
    background:none;
    color:#fff;
    text-decoration:none;
    }

    #cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }
    #cat-2:hover, #cat-4:hover {background:#3c78a7; color:#fff; }
    #cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }
    #cat-2:hover a, #cat-4:hover a {background:#3c78a7; color:#fff; }

    #bottom {
    width: 940px;
    }

    #front-list {
    width:590px;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.75em;
    float:left;
    }

    #archive {
    padding-top:15px;
    font-size:1.05em;
    line-height:1.75em;
    }

    #front-list blockquote {
    padding: 0px 10px 0 10px;
    }

    #front-list .title, #archive .title {
    font-weight:bold;
    font:2.0em Georgia;
    letter-spacing:-0.05em;
    }

    #front-list .clearfloat, #archive .clearfloat {
    padding-bottom:10px;
    border-bottom:1px dotted #ccc;
    margin-bottom:10px;
    }

    #front-list .spoiler, #archive .spoiler {
    display:block;
    margin-top:3px;
    }

    #front-list p, #archive p {
    margin:0px;
    padding:0px;
    }

    .author {
    font-size:0.8em;
    font-weight:bold;
    }

    .meta {
    font-size:0.8em;
    color:#333;
    }

    .meta a {
    color:#333;
    }

    #headline p, #featured p {
    margin:0;
    }

    /* Content Page*/

    #content {
    width:590px;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.75em;
    float:left;
    min-height:400px;
    }

    #content .breadcrumbs, #content .breadcrumbs a {
    font-weight:bold;
    color:#333;
    }

    #content h2.title {
    font:2.2em Georgia;
    font-weight:bold;
    letter-spacing:-0.05em;
    border-bottom:1px solid #ddd;
    border-top:3px solid #ddd;
    padding:5px 0px;
    }

    .post {
    font-size:1.05em;
    line-height:1.75em;
    }

    .post p {
    margin-top:0px;
    }

    .post .clearfloat {
    border-bottom:1px dotted #ccc;
    margin:10px 0px;
    }

    .post ul, .post ol, #front-list ul, #front-list ol {
    margin-bottom:15px;
    }

    .post ul li, #front-list ul li {
    list-style:square;
    margin-left:30px;
    }

    .post ol li, #front-list ol li {
    list-style:decimal;
    margin-left:30px;
    }

    .post ol li ul li, #front-list ol li ul li {
    list-style:square;
    margin-left:20px;
    }

    .post img, .post a img, #front-list img, #archive img {
    border:1px solid #ccc;
    margin:0 10px 5px 0;
    padding:2px;
    }

    .post .ads {
    margin-top:10px;
    }

    .entry {
    margin-top:20px;
    }

    #stats {
    margin-top:0px;
    padding:4px 0px;
    text-transform:uppercase;
    font:0.8em Arial;
    display:block;
    }

    #stats span {
    padding: 0px 20px 0px 0px;
    }

    #stats span a:hover {
    background:none;
    }

    #stats span a {
    color:#333;
    }

    #stats img, #nav img {
    border:0px;
    margin:0px;
    padding:0px;
    }

    #tools {
    width:590px;
    height:25px;
    font-size:0.95em;
    }

    #tools a:hover {
    background:none;
    }

    .navigation {
    padding:5px 0px;
    text-align:Center;
    }

    /* Sidebar*/
    #sidebar {
    width:320px;
    float:right;
    margin:0px 0px 0px 0px;
    }

    #sidebar h3 {
    font:1.1em Arial;
    font-weight:bold;
    background:#333;
    color:#fff;
    margin:10px 0px 5px 0px;
    padding:3px 10px;
    }

    #sidebar-top, #sidebar-bottom {
    width:300px;
    float:right;
    padding:0px 10px 10px 10px;
    background:#fff;
    }

    #sidebar-bottom, #sidebar-middle {
    margin-top:10px;
    }

    #sidebar-middle {
    width:320px;
    float:right;
    }

    #sidebar-left {
    width:135px;
    padding:0px 10px 10px 10px;
    float:left;
    background:#fff;
    }

    #sidebar-right {
    width:135px;
    padding:0px 10px 10px 10px;
    float:right;
    background:#fff;
    }

    #sidebar li {
    list-style:none;
    border-bottom:1px dotted #ccc;
    display:block;
    padding:2px 0px 2px 13px;
    background:url(images/sub.png) no-repeat 0 0px;
    }

    #sidebar li ul li:last-child{
    list-style:none;
    border-bottom:0px dotted #ccc;
    display:block;
    padding:2px 0px 0px 13px;
    background:url(images/sub.png) no-repeat 0 0px;
    }

    #sidebar-ads {
    width:300px;
    float:right;
    margin-bottom:10px;
    padding:10px;
    background:#fff;
    }

    /* Form Elements */

    select {
    border:1px solid #333;
    width:100%
    }

    .field {
    padding: 2px;
    border:1px solid #333;
    background:#fff;
    font-size:1.0em;
    }

    #s {
    padding:1px;
    font-size:1.0em;
    width:150px;
    }

    #searchsubmit {
    padding-left:5px;
    }

    #commentform input {
    width: 140px;
    margin: 5px 5px 1px 0;
    }

    #commentform textarea {
    width: 99%;
    margin-top:5px;
    }

    /* Comments*/

    .commentlist cite {
    font-style:normal;
    margin-bottom:4px;
    display:block;
    }

    .commentlist blockquote {
    background:#ededed;
    }

    .commentlist li {
    padding: 10px 0px 10px 0px;
    list-style:none;
    margin-bottom:3px;
    }

    .commentlist li li {
    background:none;
    border:none;
    list-style:square;
    margin:3px 0 3px 20px;
    padding:3px 0;
    }

    .commenttext {
    padding: 10px 10px 0px 10px;
    background:#f2f2f2;
    border-top:1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width:495px;
    float:right
    }

    .commentlist cite strong {
    font-size:1.1em;
    }

    li.my_comment {
    background: #FFF;
    border:none;
    }

    li.my_comment cite strong {
    font-size: 1.3em;
    color:#313228;
    }

    #commentform small {
    background:#FFF;
    font-weight:bold;
    padding:0;
    }

    .commentmetadata {
    color:#4d4d4d;
    display: block;
    margin-top:3px;
    text-align:right;
    font-size:0.9em;
    }

    .commentmetadata a, .commentmetadata a:visited {
    color:#959382;
    }

    .commentlist small {
    background:#e9e9e9;
    }

    .avatar {
    border:1px solid #bbb;
    margin:0px 10px 0px 0px;
    float:left;
    padding:2px;
    width:55px;
    height:55px;
    }

    #comment {
    width:590px;
    background:#fff;
    }

    /* Footer*/

    #front-popular {
    font-size:0.7em;
    color:#fff;
    width: 940px;
    background:#2c2c2c url(images/bottombar.png) bottom no-repeat;
    margin: 0 auto;
    padding:10px;
    }

    #recentpost, #mostcommented {
    width:280px;
    float:left;
    padding:10px;
    border:1px solid #fff;
    }

    #mostcommented {
    margin-left:17px;
    }

    #recent_comments {
    width:280px;
    float:right;
    padding:10px;
    border:1px solid #fff;
    }

    #recentpost a, #mostcommented a, #recent_comments a {
    color:#fff;
    }

    #recentpost ul, #mostcommented ul, #recent_comments ul {
    margin-top:5px;
    }

    #recentpost ul li, #mostcommented ul li, #recent_comments ul li {
    list-style:none;
    border-top:1px dotted #fff;
    padding:5px;
    display:block;
    }

    #recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
    background:#3c78a7;
    color:#fff;
    }

    #recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
    border-top:0px dotted #fff;
    }

    #footer {
    margin: 0 auto;
    width: 960px;
    font-size:0.6em;
    padding-top:10px;
    padding-bottom:10px;
    }

    /* Float Properties*/

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

    .clearfloat {
    display: inline-block;
    }

    /* Hides from IE-mac \*/
    * html .clearfloat {
    height:1%;
    }

    *+html .clearfloat {
    height:1%;
    }

    .clearfloat {
    display:block;
    }

    What should I do next? I really appreciate the help!

    Thread Starter BBombshell

    (@bbombshell)

    Ok, so I put everything back, the way you originally suggested. Unfortunately, it still isn’t working. Just thought I’d give it another try…

    I look forward to your response!

    Thread Starter BBombshell

    (@bbombshell)

    Nevermind! I tried using the second set of code you gave me, along with Photobucket, and it worked perfectly! Thank you so much!!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Gradiate Background on Arthemia Theme’ is closed to new replies.