Support » Themes and Templates » Background Issues

  • I am having issues with my site. You can check it out at:
    http://www.iblackedout.com/blog

    The problem that I am having is with the background. For some reason when I go to different monitor resolutions the background stays in the same spot and screws everything up.

    What I am looking for is this:

    http://www.iblackedout.com/testpic/testpic/Blackedout.html

    What I have attached is the html code for the Stylesheet (style.css). Any information would help. Thank you.

    body {
    background:#ffffff url(images/body3.jpg) ;
    color:#ffffff;
    font-family:arial,arial,tahoma,sans-serif;
    font-size:14pt;
    margin:0px;
    }
    h1 {
    font-size:18pt;
    }
    h2 {
    color:#ffffff;
    font-family:Arial;
    font-size:14pt;
    font-weight:normal;
    margin-top:10px;
    }
    h3 {
    font-size:14pt;
    margin-top:10px;
    }
    h4 {
    font-size:14pt;
    }
    img {
    border:medium none;
    padding:6px;
    }
    img a {
    border:medium none;
    }
    img.left {
    border:medium none;
    float:left;
    padding:6px;
    }
    img.right {
    border:medium none;
    float:right;
    padding:6px;
    }
    blockquote {
    border-left:1px solid #A5ABAB;
    margin:15px;
    padding:0pt 12px;
    }
    code {
    font-family:”Arial”,Courier,monospace;
    margin:10px;
    }
    a {
    color:#F;
    text-decoration:none;
    }
    a:hover {
    border:medium none;
    color:#000000;
    text-decoration:underline;
    }
    #container {
    background:#000000 url(images/top.jpg) repeat-x scroll 0% top;
    border-color:-moz-use-text-color #ffffff rgb(46, 46, 46);
    border-style:none ;
    border-width:thin 1px 1px;
    color:#2E2E2B;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:25px 4px 4px;
    width:1050px;
    }
    #header {
    background:#DDDDDD none repeat scroll 0% 50%;
    border: #3D3D3D;
    color:#333333;
    height:180px;
    width:100%;
    }
    #header h1 {
    font-family:Arial;
    font-size:30pt;
    font-weight:300;
    letter-spacing:1px;
    margin:0pt;
    padding:80px 7pt 0pt 16px;
    text-align:right;
    }
    #header h1 a {
    color:#818181;
    text-decoration:none;
    }
    #header h1 a:hover {
    color:#FFFFFF;
    text-align:right;
    text-decoration:none;
    }
    #header h2 {
    color:#EEEEEE;
    font-size:10pt;
    font-weight:300;
    letter-spacing:0px;
    margin:0pt;
    padding:0pt 11pt 0pt 18px;
    text-align:right;
    }
    #menu {
    background:#0E1112 url(images/menu.JPG) repeat-y scroll 0% 50%;
    font-family:arial,arial,arial,serif;
    font-size:8pt;
    height:25px;
    width:100%;
    }
    #menu ul {
    border-bottom: #212121;
    margin:0px 0pt 0pt;
    padding:6pt;
    text-align:left;
    }
    #menu ul li {
    display:inline;
    list-style-type:;
    margin:0pt;
    padding:0pt;
    }
    #menu ul li a {
    color:#EFEFEF;
    font-family:Arial;
    font-size:13px;
    margin:0pt;
    padding:6px 14px;
    text-decoration:none;
    }
    #menu ul li a:hover {
    background-color:#;
    color:#ffffff;
    }
    #content {
    background:transparent url() no-repeat scroll 0% top;
    float:left;
    margin-top:0px;
    overflow:hidden;
    width:70%;
    }
    .post {
    color:#000000;
    line-height:12pt;
    margin:0pt 10px;
    padding:4px;
    }
    .post h2 {
    color:#FFFFFF;
    font-family:Arial;
    font-size:14pt;
    font-weight:bold;
    }
    .post h2 a {
    color:#000000;
    text-decoration:none;
    }
    .post h2 a:hover {
    color:#000000;
    text-decoration:none;
    }
    .post p {
    font-size:11pt;
    }
    .post a {
    color:#000000
    text-decoration:none;
    }
    .post ul {
    }
    .post li {
    }
    .entry p {
    color:#000000;
    margin:8px 0pt;
    }

    .postmetadata {
    background-color:#ffffff;
    border:1px solid #B7B7B7;
    clear:both;
    margin-top:6px;
    padding:6px;
    }
    .navigation {
    float:left;
    font-size:8pt;
    width:100%;
    }
    .alignleft {
    float:left;
    margin:25px;
    }
    .alignright {
    float:right;
    margin:25px;
    }
    .notfound {
    font-size:14pt;
    font-weight:300;
    padding:25px;
    }
    #left {
    border-right:1px dashed #2C2C2C;
    float:left;
    font-family:arial,arial,tahoma;
    font-size:8pt;
    margin:12px 0pt 24px;
    padding:0pt;
    width:200px;
    }
    #left h2 {
    background-color:#1A1C1C;
    color:#C3C3C3;
    font-family:arial,arial,arial;
    font-size:9pt;
    font-weight:bold;
    margin:0pt;
    padding:2pt 0pt 2pt 5pt;
    text-align:left;
    }
    #left p {
    margin:0pt;
    padding:0pt 6px 0pt 12px;
    }
    #left img {
    margin:0pt;
    padding:0pt;
    }
    #left ul {
    list-style-type:none;
    margin:12px;
    padding:0pt;
    }
    #left ul li {
    background-color:#252627;
    border-bottom:thin solid #2F2F2F;
    line-height:14pt;
    list-style-type:none;
    margin:0pt;
    padding:0pt;
    }
    #left ul ul {
    margin:5px 5pt 0px 5px;
    padding:0pt;
    }
    #left ul ul li {
    list-style-position:inside;
    list-style-type:none;
    }
    #left ul ul ul {
    margin:0pt;
    padding:0pt;
    }
    #left ul ul ul li {
    color:#898989;
    list-style-type:square;
    padding:0pt 0pt 0pt 15px;
    }
    #right {
    border-left:1px #2C2C2C;
    float:right;
    font-family:arial,arial,tahoma;
    font-size:8pt;
    margin:12px 0pt 24px;
    padding:5pt;
    width:200px;
    }
    #right h2 {
    background-color:#1A1C1C;
    color:#C3C3C3;
    font-family:arial,arial,arial;
    font-size:9pt;
    font-weight:bold;
    margin:0pt;
    padding:2pt 0pt 2pt 5pt;
    text-align:left;
    }
    #right p {
    margin:15pt;
    padding:0pt 6px 0pt 12px;
    }
    #right img {
    margin:0pt;
    padding:0pt;
    }
    #right ul {
    list-style-type:none;
    margin:12px;
    padding:0pt;
    }
    #right ul li {
    background-color:#252627;
    border-bottom:thin solid #2F2F2F;
    line-height:30pt;
    list-style-type:none;
    margin:0pt;
    padding:0pt;
    }
    #right ul ul {
    margin:5px 5pt 0px 5px;
    padding:0pt;
    }
    #right ul ul li {
    list-style-position:inside;
    list-style-type:none;
    }
    #right ul ul ul {
    margin:0pt;
    padding:0pt;
    }
    #right ul ul ul li {
    color:#898989;
    list-style-type:square;
    padding:0pt 0pt 0pt 20px;
    }
    #commentssection {
    clear:both;
    margin:0pt;
    padding:2px 12px;
    }
    #commentssection h3 {
    color:#000000;
    font-family:arial,arial,arial;
    font-size:12pt;
    font-style:normal;
    font-weight:300;
    }
    #commentform {
    background:#ffffff none repeat scroll 0% 50%;
    margin:12px 12px 20px;
    padding:20px;
    }
    #commentform p {
    color:#000000;
    font-family:Arial;
    font-size:10px;
    }
    #commentform a {
    border-bottom:0px solid #ffffff;
    color:#000000;
    line-height:14pt;
    text-decoration:none;
    }
    #commentform h3 {
    color:#000000;
    font-family:arial,arial,arial;
    font-size:10pt;
    font-weight:bold;
    }
    #commentbox {
    margin:5px 5px 0pt 0pt;
    min-width:400px;
    width:100%;
    }
    #author, #email, #url, #commentbox, #submit {
    background:#ffffff none repeat scroll 0% 50%;
    border:2px solid #595959;
    color:#000000;
    font-family:arial,arial,arial;
    font-size:8pt;
    margin:5px 5px 0pt 0pt;
    padding:6px;
    }
    #submit {
    margin:5px 5px 0pt 0pt;
    }
    ol.commentlist {
    list-style-type:none;
    }
    ol.commentlist li {
    background:#2C2C2C none repeat scroll 0% 50%;
    margin:10px 0pt;
    overflow:hidden;
    padding:5px 0pt 5px 10px;
    }
    ol.commentlist li.alt {
    background:#2C2C2C none repeat scroll 0% 50%;
    }
    ol.commentlist li p {
    background-color:#353535;
    color:#C3C3C3;
    line-height:14pt;
    margin:6px 6pt;
    padding:0pt 6px 0pt 4pt;
    }
    ol.commentlist a {
    color:#C3C3C3;
    }
    cite {
    color:#C3C3C3;
    font-family:arial,arial,tahoma;
    font-size:9pt;
    font-style:normal;
    font-weight:bold;
    }
    cite a {
    border-bottom:1px dotted #465D71;
    color:#ffffff;
    text-decoration:none;
    }
    #searchform {
    font-family:arial,arial,arial;
    padding:6px 0pt 6px 6px;
    }
    #searchform input#s {
    background:#ffffff none repeat scroll 0% 50%;
    border:1px solid #676767;
    color:#FFFFFF;
    font-family:arial,arial,arial;
    font-size:10px;
    margin:2px;
    padding:2px;
    }
    #searchform input#searchsubmit {
    background-color:#ffffff;
    border:1px solid #B7B7B7;
    color:#000000;
    font-family:arial,arial,arial;
    font-size:7pt;
    margin:2px 0pt 0pt 2px;
    padding:2px;
    }
    #footer {
    background:#1E2325 none repeat scroll 0% 50%;
    border:1px solid #333B3E;
    clear:both;
    font-family:arial;
    font-size:9pt;
    margin-bottom:4px;
    margin-top:10px;
    text-align:center;
    width:100%;
    }
    #footer p {
    color:#EEEEEE;
    margin:0pt;
    padding:6px;
    }
    #footer a {
    color:#BCBCBC;
    text-decoration:none;
    }
    #footer a:hover {
    color:#5D5D5D;
    text-decoration:underline;
    }

Viewing 1 replies (of 1 total)
  • You should use a fixed width to keep things in check. Or drop the background image (black-white-black) and use background-colors instead of it for your <divs> so the background color moves with the divs when they are resized when screen size is reduced.

Viewing 1 replies (of 1 total)
  • The topic ‘Background Issues’ is closed to new replies.