SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Image Background

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



    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
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hello!

    url('filefolder/filename.gif')
    You replaced this with the correct name/address of your file, right?
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Casterina. Welcome to the forums.

    It looks lke the background image is working, if I userstand what you are referring to:

    Code:
    background: url(images/menubg.gif) no-repeat black;
    The HTML you posted above doesn't match the HTML in the site you linked to, though. Be aware that you are not meant to use an id more than once per page.

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead) View Post
    Hello!

    You replaced this with the correct name/address of your file, right?
    This is my filepath to the Menu image file,

    Code:
    wp-content/uploads/2012/06/Menu.png
    Quote Originally Posted by ralph.m View Post
    Hi Casterina. Welcome to the forums.

    It looks lke the background image is working, if I userstand what you are referring to:

    Code:
    background: url(images/menubg.gif) no-repeat black;
    The HTML you posted above doesn't match the HTML in the site you linked to, though. Be aware that you are not meant to use an id more than once per page.
    Which HTML should I use? The one I mentioned or the one on the website that I linked to?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Casterina View Post
    Which HTML should I use? The one I mentioned or the one on the website that I linked to?
    This is too confusing. Is the site you linked to your or not? Because it's working there ...

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This is too confusing. Is the site you linked to your or not? Because it's working there ...
    The website I linked you isn't my website but I like the Menu design so I want it on my website

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Casterina View Post
    The website I linked you isn't my website but I like the Menu design so I want it on my website
    Oh, OK. Well, if this is your file path

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

    then just make sure that your CSS file is looking in the right place for it, and make sure it's also called "Menu.png" in the CSS file and not "menu.png". You have to match capitals and lower case.

    What is your CSS rule for calling this image as a background, and where is your CSS file located in relation to the image file?

  8. #8
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Oh, OK. Well, if this is your file path

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

    then just make sure that your CSS file is looking in the right place for it, and make sure it's also called "Menu.png" in the CSS file and not "menu.png". You have to match capitals and lower case.

    What is your CSS rule for calling this image as a background, and where is your CSS file located in relation to the image file?
    I'm not sure of the CSS rule of the image as a background, how do I find out? I'm editting the file style.css in WordPress

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Is your site online? It would be much easier if we could just look at the page in question. Otherwise, maybe post all of your CSS here and I'll see if there's any rule there calling that image as a background.

    Here's how it's done in the site you linked to:

    Code:
    .menul {
    width: 375px;
    float: left;
    margin-right: 35px;
    margin-bottom: 20px;
    background: url(images/menubg.gif) no-repeat black;
    height: 101px;
    }

  10. #10
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is your site online? It would be much easier if we could just look at the page in question. Otherwise, maybe post all of your CSS here and I'll see if there's any rule there calling that image as a background.

    Here's how it's done in the site you linked to:

    Code:
    .menul {
    width: 375px;
    float: left;
    margin-right: 35px;
    margin-bottom: 20px;
    background: url(images/menubg.gif) no-repeat black;
    height: 101px;
    }
    This is my style.css file,

    Code:
    .wp-caption {}
    .wp-caption {}
    .sticky {}
    .gallery {}
    .bypostauthor {}
    .alignright {}
    .alignleft {}
    .aligncenter {}
    .alignnone {}
    .gallery-caption {}
    For this bit,

    Code:
    background: url(images/menubg.gif) no-repeat black;
    My filepath is wp-content/uploads/2012/06/Menu.png, how do I lay it out into the CSS code?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Casterina View Post
    This is my style.css file,

    Code:
    .wp-caption {}
    .wp-caption {}
    .sticky {}
    .gallery {}
    .bypostauthor {}
    .alignright {}
    .alignleft {}
    .aligncenter {}
    .alignnone {}
    .gallery-caption {}
    Hm, I'm not familiar with WP, but if that's all the CSS you have, then your site has no styling at all at this stage? Is that the case? If not, view your page source (View > Source or View > Source Code) and see what style sheet the page is actually linking to, and see what styles are in there.

  12. #12
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, I'm not familiar with WP, but if that's all the CSS you have, then your site has no styling at all at this stage? Is that the case? If not, view your page source (View > Source or View > Source Code) and see what style sheet the page is actually linking to, and see what styles are in there.
    I'm using WordPress free template, I haven't done any styling in style.css

    I'll use this CSS code,

    Code:
    .menul {
    width: 375px;
    float: left;
    margin-right: 35px;
    margin-bottom: 20px;
    background: url(images/menubg.gif) no-repeat black;
    height: 101px;
    }
    But for this bit,

    Code:
    background: url(images/menubg.gif) no-repeat black;
    My filepath is wp-content/uploads/2012/06/Menu.png, how do I lay it out into the CSS code?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Casterina View Post
    I'm using WordPress free template, I haven't done any styling in style.css
    Is the HTML you posted above on your page yet? If so, try something like this in your style sheet:

    Code:
    .menu_pdf_styles {
       background-image: url('/wp-content/uploads/2012/06/Menu.png);
    }
    the theme you are using will have at least one style sheet of its own, so you might as well use that instead of style.css. Style.css won't be of any use to you unless the these links to it. That's why I suggested tracking down what style sheet the theme is actually using. Then you can just add any new styles to that style sheet. You can find out what style sheet the theme is using by viewing the source code of your page in your browser.

  14. #14
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is the HTML you posted above on your page yet? If so, try something like this in your style sheet:

    Code:
    .menu_pdf_styles {
       background-image: url('/wp-content/uploads/2012/06/Menu.png);
    }
    the theme you are using will have at least one style sheet of its own, so you might as well use that instead of style.css. Style.css won't be of any use to you unless the these links to it. That's why I suggested tracking down what style sheet the theme is actually using. Then you can just add any new styles to that style sheet. You can find out what style sheet the theme is using by viewing the source code of your page in your browser.
    This is my current HTML,

    Code:
    <div id="menu1" class="menu_pdf_styles">Menu</div>
    <div id="menu1" class="menu_pdf_styles">
    
    <a href="Menu/Menu.pdf" target="_blank">Click here to view Menu</a>
    </div>
    I'll PM you the link to my website

  15. #15
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you find out which stylesheet the theme is using?

  16. #16
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    First locate where your images are being stored, if you don't know this, nothing will work.

    A good way to do tho it is to look at any other rules with 'background: url(...)' in your style.css file. make sure your image is in THAT folder and make sure you use the NAME path in your CSS rule.

    also note: you use the same ID more than once (bad) and you have the same class nested.. that is bound to give you headaches later on.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Casterina View Post
    Did you find out which stylesheet the theme is using?
    I did have a quick look at your page, but had to leave at that point. But now the link is gone. Anyhow, I did see the HTML you cited above in the page, but it wasn't showing up on the page. The link to the pdf was fine, though. I don't really like themes that are unrelated to your site's needs like this. But to be honest, it looks like you need someone to help you with modifying a theme and styling it. It's a bit of a messy business, but near impossible to do yourself if HTML and CSS are not your thing. But it's impossible for us to help much if we can't see what you are ding, I'm afraid.

  18. #18
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I did have a quick look at your page, but had to leave at that point. But now the link is gone. Anyhow, I did see the HTML you cited above in the page, but it wasn't showing up on the page. The link to the pdf was fine, though. I don't really like themes that are unrelated to your site's needs like this. But to be honest, it looks like you need someone to help you with modifying a theme and styling it. It's a bit of a messy business, but near impossible to do yourself if HTML and CSS are not your thing. But it's impossible for us to help much if we can't see what you are ding, I'm afraid.
    Do you want me to put the link back up so you can see it again


Bookmarks

Posting Permissions

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