How would I add a Background Image

  • I would like to add a background image to my blog. I will make one up in Photoshop, add it to my Images folder in my c-panel, but where do I put it in my style sheet?

    /* rules here and they will be applied
    to pages from ‘editcss’
    immediately as long as you keep this window open. */

    /**** LINK-tag style sheet style.css ****/

    /* Type CSS rules here and they will be applied
    to pages from ‘editcss’
    immediately as long as you keep this window open. */

    /**** LINK-tag style sheet style.css ****/

    /* Type CSS rules here and they will be applied
    to pages from ‘editcss’
    immediately as long as you keep this window open. */

    /**** LINK-tag style sheet style.css ****/

    /*
    Theme Name: Black-LetterHead
    Theme URI: https://ulyssesonline.com
    Description: Based on Robin Hastings’ Letterhead, but with a black background.
    Author: Ulysses Ronquillo
    Author URI: https://ulyssesonline.com
    Version: 1.0
    .
    This theme was designed and built by Robin Hastings, whose blog you will find at
    https://www.rhasting.net. It uses the default Kubrick theme as a base. CSS colors
    modified by Ulysses Ronquillo located at https://ulyssesonline.com.

    The CSS, XHTML and design is released under GPL:
    https://www.opensource.org/licenses/gpl-license.php
    .
    */

    /* Begin Typography & Colors */
    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Arial, Times New Roman, Sans-Serif;
    background-color: ##ffffff;
    color: #000000;
    text-align: left;
    }

    #page {
    background-color: #ffffff;
    border: 1px solid #959596;
    text-align: left;
    }

    #header {
    background-color: ffffff;
    }

    #content {
    font-size: 1.0em
    }

    .widecolumn .entry p {
    font-size: 1.00em;
    }

    .narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.4em;
    }

    .widecolumn {
    line-height: 1.6em;
    }

    .narrowcolumn .postmetadata {
    text-align: center;
    }

    .alt {
    background-color: 3671a9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

    #footer {
    background-color: white;
    border-right: 1px solid #959596;
    }

    small {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
    }

    h1, h2, h3 {
    font-family: Garamond, ‘Copperplate Gothic Light’, Georgia, ‘Times New Roman’, Serif;
    font-weight: bold;
    }

    h1 {
    font-size: 3.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    }

    .description {
    font-size: 1.2em;
    text-align: center;
    letter-spacing: .6em;
    }

    h2 {
    font-size: 1.6em;
    }

    h2.pagetitle {
    font-size: 1.6em;
    }
    #sidebar {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    }
    #sidebar h1 {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: .5em;
    }

    h3 {
    font-size: 1.3em;
    }

    h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: #2730da;
    }

    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #2730da;
    }

    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }

    .entry p a:visited {
    color: #2730da;
    }

    .commentlist li, #commentform input, #commentform textarea {
    font: 0.9em Verdana, Arial, Sans-Serif;
    }

    .commentlist li {
    font-weight: bold;
    }

    .commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }

    .commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }

    #commentform p {
    font-family: Verdana, Arial, Sans-Serif;
    }

    .commentmetadata {
    font-weight: normal;
    }

    #sidebar {
    font: 1em Verdana, Arial, Sans-Serif;
    }

    small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #666;
    }

    code {
    font: 1.1em ‘Courier New’, Courier, Fixed;
    }

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

    a, h2 a:hover, h3 a:hover {
    color: #2730da;
    text-decoration: none;
    }

    a:hover {
    color: #707070;
    text-decoration: underline;
    }

    #wp-calendar #prev a {
    font-size: 9pt;
    }

    #wp-calendar a {
    text-decoration: none;
    }

    #wp-calendar caption {
    font: bold 1.3em Verdana, Arial, Sans-Serif;
    text-align: center;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
    /* End Typography & Colors */

    /* Begin Structure */
    body {
    margin: 0;
    padding: 0;
    }

    #page {
    background-color: white;
    background-image:https://www.sportstunner.com/images/150599main_lightning_photo.jpg
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }

    #header {
    padding: 0;
    margin: 0 auto;
    height: 200px;
    width: 100%;
    background-color: white;
    }

    .narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 450px;
    }

    .widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 100px;
    width: 550px;
    }

    .pagepost {
    margin: 0 0 40px;
    border-top: 1px solid grey;
    }

    .post {
    margin: 0 0 40px;
    text-align: justify;
    border-top: 1px solid grey;
    }

    .widecolumn .post {
    margin: 0;
    }

    .narrowcolumn .postmetadata {
    padding-top: 5px;
    }

    .widecolumn .postmetadata {
    margin: 30px 0;
    }

    #footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }

    #footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
    /* End Structure */

    /* Begin Headers */
    h1 {
    padding-top: 40px;
    margin: 0;
    }

    .description {
    text-align: center;
    }

    h2 {
    margin: 30px 0 0;
    }

    h2.pagetitle {
    margin-top: 30px;
    text-align: center;
    }

    #sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }

    h3 {
    padding: 0;
    margin: 30px 0 0;
    }

    h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
    /* End Headers */
    /* Begin Lists

    Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */

    html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    }

    html>body .entry li {
    margin: 7px 0 8px 10px;
    }

    .entry ul li:before, #sidebar ul ul li:before {
    content: “0BB 020”;
    }

    .entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }

    .entry ol li {
    margin: 0;
    padding: 0;
    }

    .postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }

    #sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0;
    }

    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 10px;
    }

    #sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }

    #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;
    }

    #sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
    /* End Entry Lists */

    /* Begin Form Elements */
    #searchform {
    margin: 10px auto;
    padding: 5px 3px;
    text-align: right;
    }

    #sidebar #searchform #s {
    width: 115px;
    padding: 2px;
    background-color: #909090;
    border-style: ridge;
    }

    #sidebar #searchsubmit {
    padding: 1px;
    background-color: #909090;
    }

    .entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }

    select {
    width: 130px;
    }

    #commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    background-color: #A0A0A0;
    border-style: ridge;
    }

    #commentform textarea {
    width: 100%;
    padding: 2px;
    background-color: #A0A0A0;
    border-style: ridge;
    }

    #commentform #submit {
    margin: 0;
    float: right;
    }
    /* End Form Elements */

    /* Begin Comments*/
    .alt {
    margin: 0;
    padding: 10px;
    }

    .commentlist {
    padding: 0;
    text-align: justify;
    }

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

    .commentlist p {
    margin: 10px 5px 10px 0;
    }

    #commentform p {
    margin: 5px 0;
    }

    .nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }

    .commentmetadata {
    margin: 0;
    display: block;
    }
    /* End Comments */

    /* Begin Sidebar */
    #sidebar
    {
    padding: 20px 0 10px 0;
    margin-left: 545px;
    width: 190px;
    }

    #sidebar form {
    margin: 0;
    }
    /* End Sidebar */

    /* Begin Calendar */
    #wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    }

    #wp-calendar caption {
    text-align: center;
    width: 100%;
    }

    #wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }

    #wp-calendar td.pad:hover { /* Doesn’t work in IE */
    background-color: #fff; }
    /* End Calendar */

    /* Begin Various Tags & Classes */
    acronym, abbr, span.caps {
    cursor: help;
    }

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

    blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }

    blockquote cite {
    margin: 5px 0 0;
    display: block;
    }
    hr {
    display: none;
    }

    .center {
    text-align: center;
    }

    a img {
    border: none;
    }

    .navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
    /* End Various Tags & Classes*/

Viewing 4 replies - 1 through 4 (of 4 total)

  • First thing, you shouldn’t post code like that it just takes up space. If you don’t have an idea of where in the code you want to change things. Wait until someone asks, then post the code they would like to look at.

    As for your question.

    If you want the image in the ‘body’, add the following line to you

    body {
    background-image: url(‘path_to_image/image.jpg’);
    }

    If you want it in the ‘sidebar’,

    #sidebar {
    background-image: url(‘path_to_image/image.jpg’);
    }

    Go here for more info:
    https://www.w3schools.com/css/css_background.asp
    You can find better sites if you do a Google search. This one just gives you some really basic pointers. There is a lot of good info on CSS out there, next time try Google before you wait two hours for someone like me to reply.

    Good luck.

    p.s.

    If your image folder is in you theme folder, you just need

    background-image: url(‘folder_name/image.jpg’);

    You see where it says “background-image:https://www.sportstunne…etc.” that’s the place. Put the new image in your theme’s directory, where style.css is, then enter only the image’s name instead of that url.

    Thread Starter psunate1977

    (@psunate1977)

    I got it thanks…

    ok id like to respond to this i added a bg to my theme but it took 1 inch off the top of my center section how do i get it to not do that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How would I add a Background Image’ is closed to new replies.