SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bg image not displaying

    SITE URL: http://joelknoop.com/wp


    I am attempting to put a background image in my site.
    I want it to be near the upper right, behind the three paragraphs, below the header.
    I am using the css backgroud-image property.

    problem is i have tried applying it to several diferent divs and not really had any success.

    the closest i got was applying it to (i think) the entry-content div. the image displayed, but it was only the extreme left edge of the image and no amount of background-position tweaks would fix it.

    i have also tried applying it to the paragraph tag but again i only got a partial image.

    most of the divs i try applying it to, the image does not display at all, and no amount of backgound-position or z-index tweaks would make it show.

    currently the image is being applied to the body tag but is not displaying at all.

    any suggestions?


    ultimately i am recreating the original site in wordpress: http://joelknoop.com
    that will give you an idea of where i want the bg image to be (approx).

    in case you missed it, site URL is at the top of the post.
    the image is 'lines.png'

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    It wont apply to the CSS because you are immediately changing the background rule
    you have:
    Code:
    body {    
        background-image: url('http://joelknoop.com/wp/wp-content/uploads/lines.png');
        background-repeat: no-repeat;
        background-position: ;   
        overflow: show;; 
    }  
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        background: #000;
    border: 0;
    margin: 0;
    padding: 0;vertical-align: baseline;
    }
    So it overwrites the first rule.

    You would need to apply the background image to the #main div.
    Code:
    #main {   
        border:2px solid #fff;
        clear: both;
        overflow: hidden;
        padding: 40px 0 0 0;
        background: url('http://joelknoop.com/wp/wp-content/uploads/lines.png') top right;
        }
    should do it.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Zealot tim@getdim's Avatar
    Join Date
    Jul 2012
    Location
    Detroit
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that before. and i tried it again.
    image is still not displaying.

  4. #4
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like spikeZ said, it looks like on line 83 of your style sheet, you apply a black background color to all elements on your page. There are also some other rules causing issues. Try this:

    Line 38:
    remove background: #000;

    to the body, add:
    background-color: #000;

    On line 438 (#wrapper), remove:
    background:#fff;

    On line 91 (#main), remove:
    background-image:url('http://joelknoop.com/wp/wp-content/uploads/lines.png') top right;

    and replace it with:

    background-image:url('http://joelknoop.com/wp/wp-content/uploads/lines.png');
    background-repeat: no-repeat;
    background-position: 400px 100px;

    You might have to adjust the background-position values. Hope that helps.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •