Custom Fields
Support General Reference image field in css?

  • Creator
  • #11924
    Resolved Michael


    I have some fields set up on pages that include an image for mobile. The standard page displays a featured image in the hero and I want to change it out by css so a different image displays on mobile.

    On a page by page basis this is obviously relatively simple with code like;

    @media (max-width: 767px) {
        .page-hero .product-page-hero {

    Is there a way I can reference the metabox page image field in css so I can use a template rather than have to write separate media queries for every page?

    i.e. my metabox field is 'mobile_image', I want to use that instead of the url in css.

Viewing 1 replies (of 1 total)
  • Author
  • #11932
    Anh Tran

    To get the image URL, you have to use PHP. So in this case, it's impossible to put the image URL directly in CSS file. However, you can use PHP to output CSS. Here is a sample code:

    $image = rwmb_meta( 'mobile_image' );
    if ( $image ) :
        echo '
        @media (max-width: 767px) {
            .page-hero .product-page-hero {
                background-image:url(' . $image['url'] . ');
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.