StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How To Use Responsive Background Images with CSS?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How To Use Responsive Background Images with CSS?

This topic is: not resolved

Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 11, 2018 at 7:57 am #222388
    vash
    Participant

    Hey!

    I'm trying to get background images on my landing page using CSS. I want something along the lines of what this page has: https://designacademy.io/design-fundamentals/ about 15-20% down the page in the section "What will I learn?"

    I want to show a Mac / iPad mockup with course content on one side, and have copy on the other half.

    I tried using inspect and page source, even got some of the css code off the stylesheet via inspect, but it's rather buggy and doesn't seem to hold for mobile, or when I reduce the size of the browser gradually.

    Is there any template css code that works well with genesis child themes? I'm using the Academy Pro one.

    https://fervent.eu
    August 11, 2018 at 9:30 am #222389
    Victor Font
    Moderator

    The example site you want to model is NOT mobile responsive. The Academy Pro theme you are using IS mobile responsive.

    Are you asking how to remove the mobile responsiveness of the Academy Pro theme?

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 11, 2018 at 1:31 pm #222396
    vash
    Participant

    Hey Victor. Not quite - I just want to load a background image for one half via CSS, and use text on the other half. I want the image to come in from the edge of the browser.

    Does that make sense?

    August 12, 2018 at 8:33 pm #222414
    Victor Font
    Moderator

    I wouldn't use a background image for that. I would use the Genesis column classes, CSS grid, or flex box and create 2 columns. One side for the image and the other for text. CSS grid and flex box allow you to reverse the order of the columns if necessary for mobile displays. All 3 can stack the columns for mobile.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.