CSS Image Background

[Casterina]

I'm trying to create this CSS image background in WordPress but the image background doesn't appear,

http://i.imgur.com/biJsU.png

http://tinyurl.com/d6t833g

I used this code for HTML,

<div id="menu1" class="menu_pdf_styles">
   text would go here
</div>

<div id="menu1" class="menu_pdf_styles">
   <p><a target="_blank" href="PDFName">Click here to download Menu</a></p>
</div>

I used this code for CSS which I added to style.css file in WordPress,

.menu_pdf_styles {
   background-image: url('filefolder/filename.gif');
   you might have other CSS styles here;
}

[rtrethewey]

The relative URL for the background image is probably incorrect. Keep in mind that relative URLs in stylesheets are resolved using the location of the stylesheet/CSS file or, when the CSS is embedded in the HTML document, the location of that document. Try changing your CSS setting to the complete URL for the background image ('http://www.example.com/filefolder/filename.gif') and see if that helps.

[Major Payne]

You will not see much of your background image unless there is a width set for the container and a height if not enough content to fill out container for a non-tiled image:

.menu_pdf_styles {
width: XXpx;
height: YYpx /* optional */
margin: 0 auto; /* remove if centering not required */
 background: #fff url('filefolder/filename.gif') no-repeat center scroll;
.
.
.
}

A tiled image just needs a width, then height depends on the container expansion with content. Still, a specified height is preferred even for tiled images at times.

Absolute and Relative Paths: http://webdesign.about.com/od/beginn.../aa040502a.htm

[Casterina]

The relative URL for the background image is probably incorrect. Keep in mind that relative URLs in stylesheets are resolved using the location of the stylesheet/CSS file or, when the CSS is embedded in the HTML document, the location of that document. Try changing your CSS setting to the complete URL for the background image ('http://www.example.com/filefolder/filename.gif') and see if that helps.

I've tried that but it didn't work

You will not see much of your background image unless there is a width set for the container and a height if not enough content to fill out container for a non-tiled image:

.menu_pdf_styles {
width: XXpx;
height: YYpx /* optional */
margin: 0 auto; /* remove if centering not required */
 background: #fff url('filefolder/filename.gif') no-repeat center scroll;
.
.
.
}

A tiled image just needs a width, then height depends on the container expansion with content. Still, a specified height is preferred even for tiled images at times.

Absolute and Relative Paths: http://webdesign.about.com/od/beginn.../aa040502a.htm

This is my filepath to the Menu image file,

wp-content/uploads/2012/06/Menu.png

How do I know the exact height and width?

[Major Payne]

Open the Menu.png in your browser and right click on it. Sect Image Info. Or, open in your graphics editor and check the size there. I could probably tell you if I had link to page where image is suppose to show.

[Dragonfire2008]

Open the Menu.png in your browser and right click on it. Sect Image Info. Or, open in your graphics editor and check the size there. I could probably tell you if I had link to page where image is suppose to show.

Or...

If you are using Firefox, just open it in the browser and look at the title bar, it will tell you.