WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding background image in a post (17 posts)

  1. vaibhavbthl
    Member
    Posted 3 years ago #

    Hello
    I am using graphene theme and i want to add a background image like this post to my post
    http://csswiz.wordpress.com/2009/08/11/backgrounds-in-posts/
    I used div tag but its still not working. P.S any suggestion is appreciated.

    Regards
    Vaibhav Bathla

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    a link to your site would be more helpful than a link to the tutorial

    have you used the code in the html editor mode of your post editor?

  3. Dennis
    Member
    Posted 3 years ago #

    Depend if will be an different background every time.

    If does I think you can add in the html, with an Div with 100% width and height, with an background image.

    If will be the same every time, it's better to this in default CSS.

  4. vaibhavbthl
    Member
    Posted 3 years ago #

    Here is the link to my site http://www.rudragems.com
    I have used the code in my post editor & my code is like this
    <html><body><div style="
    background: transparent url(http://h1.ripway.com/vaibhavbthl/Ancient%20Scroll.jpg) bottom center no-repeat;
    border: solid 1px #ccc;
    font-size: 105%;
    margin: 20px auto;
    padding: 5px 10px 20px;
    width: 95%;
    "></div>My article</div></body></html>
    Its not working like this and i don't know how to edit css files or my theme in editor menu.

  5. Dennis
    Member
    Posted 3 years ago #

    Inside the post try to using only this:

    <div style="background-image: url("-imageurl-");"> -content- </div>

    If this works, customize later.

  6. vaibhavbthl
    Member
    Posted 3 years ago #

    I tried this and I also used this inside body tag but it didn't worked.
    I think my theme doesn't support background image, I have to edit my theme first. Can you tell me what should i change in my theme.

  7. Dennis
    Member
    Posted 3 years ago #

    As I can see in your theme, I think you need to change the css of this div:

    <div class="entry-content clearfix">

    The content of the post is inside it, try to customize in the style.css.

  8. vaibhavbthl
    Member
    Posted 3 years ago #

    I have no idea on how can i change my style.css file and how to add that code in my file. Please can u define me the procedure of editing style.css file....

  9. Dennis
    Member
    Posted 3 years ago #

    Hmm, Ok, sorry.

    The style.css is an .CSS file in your theme folder. You have to access your files, enter on wp-content/themes/(youtheme)/style.css

    You will have to search for the .entry-content in the CSS file.

    It's just an possibility, I don't have sure if will work.

  10. vaibhavbthl
    Member
    Posted 3 years ago #

    I have found style.css file and this phrase also .entry-content
    Now should i replace it with <div class="entry-content clearfix"> as you mentioned above???? Will the above code that i wrote will work then?

  11. Dennis
    Member
    Posted 3 years ago #

    No, I think you need to edit the css file, search for entry-content and add the style lines, like "background-image", etc.

  12. vaibhavbthl
    Member
    Posted 3 years ago #

    I have added this code in style.css like this
    .entry-content{
    margin-top:10px;
    clear:both;
    "background-image"
    }
    and my post code is this
    <html><body background="http://h1.ripway.com/vaibhavbthl/Images/Ancient%20Scroll.jpg">
    But Its still not working...

  13. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    this: <body background="http://h1.ripway.com/vaibhavbthl/Images/Ancient%20Scroll.jpg"> is not a valid way to add a background image to anything;

    when you are trying to modify themes, you need to understand at least the basics of html, and css; for instance by looking into tutorials such as:
    http://www.w3schools.com/

    for background css:
    http://www.w3schools.com/css/css_background.asp

    also, when you are following the tutorial from your first post, you need to edit your post in the html mode of the editor, and not change back to the visual editor mode.

    you actually need to change the structure of the code into a single line, at the beginning:

    <div style="background: transparent url(http://h1.ripway.com/vaibhavbthl/Images/Ancient%20Scroll.jpg) center top no-repeat; margin: 20px auto; padding: 45px 10px 20px; width: 90%; ">
    
    YOUR POST TEXT HERE
    
    </div>

    however, i am not sure how this would fit in with the structure of your site, and with the slider.

  14. vaibhavbthl
    Member
    Posted 3 years ago #

    Thank You very much alchymyth...........That code worked like a charm....

  15. vaibhavbthl
    Member
    Posted 3 years ago #

    There's one small problem with me. Can you pls tell me how can i resize my image. I read the pages you have given in your links. I know basic html coding not m not familier with CSS....

  16. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you cannot resize background images in css;

    you would need to resize the image usign a graphic program, such as photoshop, gimp, or any of the free alternatives; and re-upload the resized image.

  17. vaibhavbthl
    Member
    Posted 3 years ago #

    Thanks alot alchymyth....... I have resized my image and now its looking really nice..

Topic Closed

This topic has been closed to new replies.

About this Topic