WordPress.org

Ready to get started?Download WordPress

Forums

Adding/Repeating a Background Image to a theme (6 posts)

  1. dc1225
    Member
    Posted 1 year ago #

    Hello,
    I have been using wordpress for about a year but still have quite a bit to learn. I am currently trying to figure out how to take an image an make it a full background by repeating the image in the CSS file on my site . The free portfolio theme I am using is: http://www.dessign.net/grid-theme-responsive/

    It has a custom setting to change the color of the background, but that's not what I want to do. I wonder if perhaps that is what's interfering.

    I have tried several variations of code that I got from forums, here is the most recent:

    body
    {
    background-image:url { background-image:url(http://www.nydogwalkingco.com/wp-content/uploads/2012/12/Picture-28.png); background-repeat:repeat;
    
    }

    However, no image shows up no matter the source or image. If I simply try to change the color manually through the stylesheet, that functions fine, so I'm wondering what the problem is and what I need to do to fix this.

    Any help would be much appreciated, if I need to provide anymore information please let me know-sorry for being so clueless!

    Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You almost got it - but the syntax should be:
    `
    body {
    background: #FFFFFF url("http://www.nydogwalkingco.com/wp-content/uploads/2012/12/Picture-28.png") repeat;
    }

    That's the shorthand version which combines the various background attributes. More details here:

    http://www.w3schools.com/css/css_background.asp

    So long as your file path is correct, that should work for you.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh, and the color won't show up unless the image is not available...so you can pick a color that makes sense in your site.

  4. dc1225
    Member
    Posted 1 year ago #

    Thanks so much for the help.

    It still seems to no be showing up. Perhaps I'm not putting it in the right place?

    This is the start of the stylesheet up to the end of the section after where I placed what you gave me:

    /*
    Theme Name: Grid Theme Responsive
    Theme URI: http://www.dessign.net/gridthemeresponsive
    Description: Grid Theme Responsive for WordPress is stylish, customizable, simple, and readable. Perfect for any illustrator or graphic designer.
    Version: 2.5
    Author: Marios Lublinski
    Author URI: http://www.dessign.net
    Tags: 4 column theme, white, clean
    
    */
    body
    <strong>{
       background: #FFFFFF url("http://www.nydogwalkingco.com/wp-content/uploads/2012/12/Picture-28.png") repeat;
    }</strong>
    /* Global */
    * { margin: 0; padding: 0; }
    body { font-size: 12px; font-family: verdana, arial, georgia; color: #333333; }
    #main_container { width: 1015px; margin: 0 auto; }
    h1,h2,h3,h4,h5,p { margin: 10px 0; }
    .left { float: left; }
    .right { float: right; }
    .clear { clear: both; }
    img { border: none; }
    a { color: #666; text-decoration: none; }
    a:hover { color:#333; }
    
    /* Header */
    #header { padding: 10px 0 30px; }
    #menu_container { padding-bottom: 25px; }
    #menu_container ul { list-style-type: none; margin-right: 25px; float: left; }
    #menu_container ul li { float: left; }
    #menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 5px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }
    #menu_container ul li a:hover { background-color: #858585; }
    #menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }
    #menu_container input[type=text] { width: 172px; height: 25px; background-color: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; }
    
    .header_social_icons_cont { float: right; margin-right: 5px; }
    .header_social_icons_cont img { float: left; margin-right: 7px; }

    If you can't answer this, thanks anyway for the help!!

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You have HTML tags in your CSS code -- which renders it invalid. So remove the <strong> tags from this:

    body
    <strong>{
       background: #FFFFFF url("http://www.nydogwalkingco.com/wp-content/uploads/2012/12/Picture-28.png") repeat;
    }</strong>
  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You also have invalid code in two other places:

    <body background="Picture-28.png">

    and

    line 44:

    body {
    background-image: url("Picture-28.png");
    background-repeat: repeat-y;
    }
    `

Topic Closed

This topic has been closed to new replies.

About this Topic