WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replacing Background Color With an Image (10 posts)

  1. sagdude2002
    Member
    Posted 3 years ago #

    Hi - the body of a website has a background color of white. I'm trying to put an image in the background instead of the white color.

    http://www.mikebradbury.net/

    code is:

    /* Main */

    #main {
    width: 900px;
    margin: 0 auto;
    background:#fff; <---- color white ----
    border:#ddd 3px solid;

    I've tried deleting the color code and inserting the image code but it didn't work.
    There is also the body code:

    body {
    margin: 0;
    padding: 0;
    background:#6666FF; <-------color of blue---------
    font-family: Verdana,Tahoma, Arial, Serif;
    line-height: 1.5em;
    font-size: 16px;
    font-size: 0.76em;
    color: #000000;

    I've tried replacing the color of blue code with the image code and that didn't work either. I also replaced both color codes with the image code and that didn't work either. Any ideas? Thank you very much.

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

  3. Michael
    Member
    Posted 3 years ago #

    You may try adding a line like this to the .css at about line 16.

    body {
    background:url("http://www.bestlandingpage.com/wp-content/uploads/2010/07/roseapplelogo004.png") no-repeat scroll 0 0 transparent;
    color:#000000;
    font-family:Verdana,Tahoma,Arial,Serif;
    font-size:0.76em;
    line-height:1.5em;
    margin:0;
    padding:0;
    }

    Replace the link with your own background link.

    Michael

  4. sagdude2002
    Member
    Posted 3 years ago #

    Thank you for your responses.

    @alchymyth - I tried inserting code per that link and all that happened was the outside area changed color from blue to white.

    @Michael w/RoseAppleMedia - same thing. It just changed the outside areas on both sides from blue to white.

    For some reason, CSS doesn't seem to be recognizing the image. It is in jpg format and is 49KB in size. I tried a 700KB image earlier.

    Any other ideas, please let me know. Thanks a lot!

    Mike

  5. Michael
    Member
    Posted 3 years ago #

    What is the URL to the image?

    Michael

  6. Tara
    Member
    Posted 3 years ago #

    try adding this:

    background:url("http://www.bestlandingpage.com/wp-content/uploads/2010/07/roseapplelogo004.png") repeat;

  7. sagdude2002
    Member
    Posted 3 years ago #

    The image is in a theme image folder in my wordpress files.

    Mike

  8. govpatel
    Member
    Posted 3 years ago #

    then you can add /images/roseapplelogo004.png

  9. Michael
    Member
    Posted 3 years ago #

    This will put the header image as the background, assuming the image is in the same folder then change the url to the image url.

    If you don't want it to repeat the do a no-repeat.

    body {
    background:url("http://www.mikebradbury.net/wp-content/themes/vino-cafe/img/HBHeader.jpg") repeat scroll 0 0 #6666FF;
    color:#000000;
    font-family:Verdana,Tahoma,Arial,Serif;
    font-size:0.76em;
    line-height:1.5em;
    margin:0;
    padding:0;
    }

    Michael

  10. sagdude2002
    Member
    Posted 3 years ago #

    It now works. I think I was putting quotation marks around the abbreviated path to the image file or I left out the img/ and that messed it up. It now reads:

    background:url(img/beachsand.jpg) repeat scroll 0 0 #6666FF;

    I entered the same path into the #main area and that took care of the white section also. Thanks a lot for all of your help, Michael!

    Thank you t-p and govpatel for your responses also. I appreciate it.

    Mike

Topic Closed

This topic has been closed to new replies.

About this Topic