Image Behind Gallery or Text – Gateway

  • Unknown's avatar
    plusclover · Member ·

    Hi,

    I was wondering if anyone knows if it is possible to place an image behind a gallery or body of text. Can this be done with CSS?

    Let me know! Thanks.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this is very likely possible. Do you have a link to a page I can look at? I would likely not recommend an image behind a gallery as it would likely obscure the images in a gallery. The same can happen with images behind text content. Of course this depends on the nature of your background image.

    I was looking at your Projects page.

  • Unknown's avatar
    plusclover · Member ·

    Hi,

    Yeah, I actually just changed the background colour of the projects gallery which won’t make it look as confusing.

    However, for the info page I would like to place a faded image behind a body of text. Any ideas how to do this?

    Thanks for your help!

  • Unknown's avatar
    thesacredpath · Member ·

    On your info page, we can use the unique page id CSS selector that is defined in the opening body HTML tag to target only that page with the background image on the content area. Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image. 

    .page-id-32 .entry-content {
    background: url('URL_OF_IMAGE') no-repeat scroll 0 0 transparent;
}

    Since I don’t know the size or proportions of the image you wish to use, there may be additional adjustments that will be needed, but this will get you started. Once you have the code and the image set, let me know and we can work out the details on things.

  • Unknown's avatar
    plusclover · Member ·

    thanks for the tip!

    Also, where can I find the page id CSS selector?

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    I used the web inspector built into my browser to find the relevant CSS. If you look on the HTML side, you will see something like this
    <body class="page page-id-85... The page-id-85 is the unique page ID CSS class. With CSS, classes will start with a period ( . ) when you are writing CSS.

    If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  • The topic ‘Image Behind Gallery or Text – Gateway’ is closed to new replies.