Adding/Repeating a Background Image to a theme

  • 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: https://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(https://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.

Viewing 5 replies - 1 through 5 (of 5 total)

  • You almost got it – but the syntax should be:
    `
    body {
    background: #FFFFFF url(“https://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:

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

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

    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.

    Thread Starter dc1225

    (@dc1225)

    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: https://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: https://www.dessign.net
Tags: 4 column theme, white, clean

*/
body
<strong>{
   background: #FFFFFF url("https://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!!

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

    body
<strong>{
   background: #FFFFFF url("https://www.nydogwalkingco.com/wp-content/uploads/2012/12/Picture-28.png") repeat;
}</strong>

    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;
    }
    `

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding/Repeating a Background Image to a theme’ is closed to new replies.