Background image on a page

  • Unknown's avatar

    Is there any way, without using CSS, to put a background image on a page?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    (I take it you mean without the Custom Design upgrade.) Possibly, but I need more specifics: on a single static page? bg to the text or to the whole area of the blog? for the blog linked to your username or a different one? Also, it would be helpful if I could see the image, so better upload it and give me its URL.

  • Unknown's avatar
    absurdoldbird · Member ·

    I don’t have the actual image yet, Panos, sorry! It’s just an idea I’m toying with for a new blog. I’d like to have a background image to a page (will have to be a narrow page as I’m using Ambiru which doesn’t have any full width templates) – just to a single static page, not the whole blog – and put clickable image buttons on it afterwards, if possible. I can do the buttons okay, but am not sure about how to do a background image beneath it.

    I’d rather not give the blog’s URL at the moment as I’m doing a lot of work on it and want to ‘launch’ it as a surprise when it’s ready.

    Thanks for any help. :)

  • Unknown's avatar
    absurdoldbird · Member ·

    Oh and, yes, I mean without the custom design upgrade. Though later I might actually get it. I’m trying to teach myself a bit of css at the moment, though not really making much headway as my memory is dreadful!

  • Unknown's avatar

    I didn’t need the URL of the blog, I only wanted to know the theme (but what you’re now describing isn’t even theme dependent, as you don’t want a bg image to the whole area of the blog, you want it in the content of the page).

    One way to do it: Upload and insert the “background” image the normal way; then upload and insert the “button” images and change this:
    <img ETC ETC
    to this:
    <img style="position:relative;top:-222px;left:111px;z-index:1;" ETC ETC

    222 and 111 are arbitrary examples: change them to adjust the positioning.

    Another way to do it: create a composite image in Photoshop then use image mapping to link to the “button” areas. You can do that here:
    http://www.isdntek.com/tagbot/imap.htm
    Note: the image has to be in the right dimensions for Ambiru (460px wide).

  • Unknown's avatar

    Thanks Panos. I’ll try both, though I think I may have thought of a ‘cheat’ using a whole image split into sections with the buttons as part of the image. I’ll try them all and see how I do. :)

  • Unknown's avatar

    You’re welcome. Your cheat = my second suggestion.

  • Unknown's avatar
    absurdoldbird · Member ·

    mmm… no, my cheat, is actually an even number of image links that look like buttons and would be part of the whole but split into separate images and aligned using the image alignment ‘none’. I’d put them directly on the page via an series of images via the media library. Each button would just be a part of each image. Difficult to explain what I mean as I’m much more visual then verbal, sorry! But anyway, I’ll try the various options and see which works best for me. :)

  • Unknown's avatar

    @absurdoldbird
    It sounds to me like you may be describing image mapping. If so then see here > https://en.forums.wordpress.com/topic/image-on-top-of-image?replies=4 If not then I apologize for my wrong guess.

  • Unknown's avatar

    Oh I see, you mean the opposite of my second suggestion: a group of images that create a larger picture when joined. That’s also a possibility: easy in Ambiru because there are no default margins around images, but more complicated than my first suggestion.

  • Unknown's avatar
    absurdoldbird · Member ·

    @tt – panos gave me a link to something similar, but thanks anyway. :)

    @panos – might be more complicated yes, but at least it’d keep things in my media library. :)

  • Unknown's avatar
    absurdoldbird · Member ·

    whoops… I mean apropos your second suggestion.

    Think I should just crawl away now and go do something else…! Thanks anyway for suggestions. Let’s see how things pan out.

  • Unknown's avatar

    I wouldn’t ever suggest a solution that wouldn’t allow you to “keep things in your media library”! Image mapping means you define areas of an image and make them function as independent links. The page I linked to simply helps you produce the required code if you aren’t an experienced coder; but the image will be uploaded to your blog. Example here:
    http://panosdemos.wordpress.com/2012/05/23/image-mapping-example/

  • Unknown's avatar
    absurdoldbird · Member ·

    Thanks Panos. I’ll have a good look at all this when I’ve had some sleep. (Which right at the moment at 2.29am, I badly need!) All your help is very much appreciated.

  • The topic ‘Background image on a page’ is closed to new replies.