WordPress.org

1. dc1225
   Member
   Posted 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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;
   }
   `

Reply

You must log in to post.