Adding background image in a post

Viewing 15 replies - 1 through 15 (of 16 total)

  • 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?

    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.

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    Here is the link to my site https://www.rudragems.com
    I have used the code in my post editor & my code is like this
    <html><body><div style=”
    background: transparent url(https://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.

    Inside the post try to using only this:

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

    If this works, customize later.

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    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.

    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.

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    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….

    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.

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    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?

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

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    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=”https://h1.ripway.com/vaibhavbthl/Images/Ancient%20Scroll.jpg”&gt;
    But Its still not working…

    this: <body background="https://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:
    https://www.w3schools.com/

    for background css:
    https://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(https://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.

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

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

    Thread Starter vaibhavbthl

    (@vaibhavbthl)

    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….

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Adding background image in a post’ is closed to new replies.