Background image

Try this Snippet

Thank you. Do you know what size the image should be or what is the optimum size? Also, is the “body background” the area to the left and right of the content area? I want the background of the entire site to have an image, not the sidebars or content area. Thanks!

The image will adjust to the viewport (Widescreen > Mobile). Also, you might have a single image, or a smaller image which you repeat in x and/or y directions. Remembering download to mobile, the optimum is a small image that you repeat on larger screens.

Or maybe you could suppress a larger image on smaller viewports using @media.

Thanks. I don’t want to repeat image. it would be one large image. Are we talking about the background only right? Do you know the suggested size for the image?

Depends on your target audience. I use a widescreen 1920×1080. A HDTV would be even larger!

The solution will render the image and then overlay it with the #main-wrapper/container

I can’t get anything to work today!! ;0)

here is the code I’m putting in the Custom CSS area to add a background image to all pages. However nothing is happening. Can you see if I have anything wrong here?

body {
/* Adjust the Image location ‘wp-content/uploads/2014/04/wolfcreekforsaveongolf.jpg’ */
background: url(/wp-content/uploads/2014/04/wolfcreekforsaveongolf.jpg) repeat 0 0 ;
}
/* Set the color (#FAFAFA) of the internal body */
#main-wrapper {
background-color: #FAFAFA;
margin-top: 0px ;
margin-bottom: 0px;
}

I can’t see this in Firebug, where are you putting it? Be brave and start using the child theme – you have the style.css in place (but remove the @charset & @import as czr does that anyway).

Try this

background: #FAFAFA url('/wp-content/uploads/2014/04/wolfcreekforsaveongolf.jpg') repeat fixed 0 0 !important ;

I’ve used it on one of my sites so know it works