WordPress.org

Ready to get started?Download WordPress

Forums

Body background image and div background image (48 posts)

  1. japanapproved
    Member
    Posted 1 year ago #

    Hello,

    I have recently started a simple template, followed a 5 min tutorial and am trying to edit the template to my liking...

    I am having a lot of trouble trying to figure out why my background images are not showing up..

    I am not sure if it has to do with the htaccess thing or not, since I found out I had to change the image tags in order for them to show up properly...(I am very new to this all, btw)

    Any help would be appreciated!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which theme are you using?

  3. japanapproved
    Member
    Posted 1 year ago #

    I am using a really simple theme I made using a tutorial:

    http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm

    That is the tutorial I used.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is the URL you're using to get your background image?

  5. japanapproved
    Member
    Posted 1 year ago #

    /images/frame.png

  6. japanapproved
    Member
    Posted 1 year ago #

    /images/frame.png

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are any images that use that directory URL showing?

  8. japanapproved
    Member
    Posted 1 year ago #

    Yes, the images that i reference like this:

    '<img src="<?php bloginfo('template_directory'); ?>/images/kitty.png"/>'

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is your background image using that reference too?
    Instead of the PHP, using text?

  10. japanapproved
    Member
    Posted 1 year ago #

    I have tried to use it but it doesnt seem to work, and of course php doesnt work in css...so not sure how to get the background of my div to work in any way.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    For the CSS to replicate the template directory, try something like;

    /wp-content/yourThemeName/images/frame.png

    Replace yourThemeName with the actual name of the theme.

  12. japanapproved
    Member
    Posted 1 year ago #

    So for the CSS I have:
    'body {
    text-align: center;
    background-color: cccccc;
    background-image:url('/wp-content/renastheme/images/bg.png');
    }'

    and the same for the div..and its not working, am I doing something wrong?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oops, forgot to say the themes part, try this;

    /wp-content/themes/renastheme/images/frame.png
  14. japanapproved
    Member
    Posted 1 year ago #

    If it matters I am using AMPP right now...

  15. japanapproved
    Member
    Posted 1 year ago #

    still not working

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are there any errors in your browser's console log?
    You can access Google Chrome's log through their Inspect Element tool, or use Firefox's Firebug tool.

  17. japanapproved
    Member
    Posted 1 year ago #

    Hmm not that I can see ...

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try remove your background colour in your CSS (for the body) - I don't think it'll work, but just narrowing the problem down.

  19. japanapproved
    Member
    Posted 1 year ago #

    Still nothing

  20. japanapproved
    Member
    Posted 1 year ago #

    Could this have anything to do with me running things off of a jump drive?

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    While using a Browser Inspector Tool (firebug or chrome), can you see any styles applied to the <body> HTML element?

    Could this have anything to do with me running things off of a jump drive?

    I don't think so.

  22. japanapproved
    Member
    Posted 1 year ago #

    Not sure if I am looking at the right thing...lol

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    For example, I'm using Chrome's Inspect Element tool (built-in) and selecting the <body> element. The CSS applied is shown on the right.
    http://snag.gy/en0Hd.jpg

  24. japanapproved
    Member
    Posted 1 year ago #

    why yes...yes i do see a style...lol

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you see the background image style applied? If so, what happens when you click on that background image URL? Does it show you an image not found icon?

  26. japanapproved
    Member
    Posted 1 year ago #

    'element {
    }

    body {
    text-align: center;
    background-image: url("/wp-content/themes/renastheme/images/bg.png");
    }'

  27. japanapproved
    Member
    Posted 1 year ago #

    doesnt show me anything...just selects the text

  28. Graycode
    Member
    Posted 1 year ago #

    I'm having the exact same issue- I can only seem to call my background using CSS, so im keen to know the solution!

  29. Andrew
    Forum Moderator
    Posted 1 year ago #

    What if you copy that URL and paste it on the end of your browser's URL for your website (where you normally type http://www.websitename).
    E.g

    localhost/projectName/wp-content/themes/renastheme/images/bg.png
  30. japanapproved
    Member
    Posted 1 year ago #

    says it is not found on this server

Topic Closed

This topic has been closed to new replies.

About this Topic