Background Image

  • Resolved maudesign

    (@maudesign)


    9 years, 4 months ago

    Hi,

    Thank you for such a great plugin, I was wandering if it’s possible to modify it so the image is shown as a background image, I’ve done some CSS tweaking but I’m not getting what I need.

    Here is the page, please scroll down to the “Socios en el Cambio” section in the homepage.

    https://creas.org/wordpress/

    I’ve been trying to create a layout where the images are of a fixed size but floating in different positions AND responsive, so when the device is a tab they go back to a grid but I’ll deal with that ??

    Ah I also need them to become have a hover transition, so when user hovers it’ll become darker or whathever.

    I’d appreciate any help, thanks!

    https://www.ads-software.com/plugins/feature-a-page-widget/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author mrwweb

    (@mrwweb)

    Anything’s possible! But you’re right that what you’re hoping to do will require a lot of custom CSS and possibly some modifications to the template (which it appears you’re already doing). For the custom positioning, make sure you’re using a min-width @media query, as I suspect that way (mobile-first) will preserve most of the styles you need on small screens.

    I would personally use opacity and/or a <a href="https://css-tricks.com/basics-css-blend-modes/">background-blend-mode</a> on a pseudo element for the hover states.

    More specific help than this is beyond the scope of what I can help do in the free support forums. If you’re interested in hiring me to help, you can contact me on my website.

    Thread Starter maudesign

    (@maudesign)

    Hi Mark,

    Thank you for your quick response.

    I′ve actually managed to do what I wanted, still being tested but I think it could be a solution. In case anybody needs it in the future here it is:

    Copy the big.php into a new folder called fpw2_views inside my theme’s folder.

    Change the code to this:

    <article class=”fpw-clearfix fpw-layout-big”>

    ” class=”fpw-featured-link”>
    <div class=”fpw-featured-image”>

    <div class=”socios-image” <?php

    if ( $thumbnail_id = get_post_thumbnail_id() ) {
    if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, ‘normal-bg’ ) )
    printf( ‘ style=”background-image: url(%s);”‘, $image_src[0] );
    }

    ?>> <h3 class=”fpw-page-title”><?php the_title(); ?></h3> </div>
    <div class=”fpw-excerpt”>
    <?php the_excerpt(); ?>
    </div>
    </article>

    Hope somebody finds it useful.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background Image’ is closed to new replies.