www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS Image Background

  1. #1
    Join Date
    Jun 2012
    Posts
    7

    CSS Image Background

    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,

    Code:
    <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,

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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    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.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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:
    Code:
    .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

  4. #4
    Join Date
    Jun 2012
    Posts
    7
    Quote Originally Posted by rtrethewey View Post
    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

    Quote Originally Posted by Major Payne View Post
    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:
    Code:
    .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,

    Code:
    wp-content/uploads/2012/06/Menu.png
    How do I know the exact height and width?

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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.

  6. #6
    Join Date
    Dec 2011
    Posts
    163
    Quote Originally Posted by Major Payne View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles