[Resolved] Responsive background in row

Home Forums Support Responsive background in row

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #306888
    sdanbu

    Hi GP

    I’m using site origins editor and I have set up a background image in a row. How do I get it to be responsive?

    I want to try the solution mentioned in the thread but I think I need to know how to call the class for that row…

    https://generatepress.com/forums/topic/responsive-image-in-sections/

    .generate-sections-container {
    background-position: center center;
    }

    Is there a way to do this with GP content in general, not just the header?

    @media
    (max-width: 768px) {
    .generate-content-header {
    background-size: contain;
    }
    }

    Thanks

    GeneratePress 1.3.46
    #306889
    Leo
    Staff
    Customer Support

    Hi Scott,

    Background images are not responsive by nature so there’s actually no code to make it responsive.

    Can you provide a link to your site? We can see if there are any alternative solution 🙂

    #306913
    sdanbu

    Can I ask about this idea instead?

    I made a div container and put an image in it, and I want to make it responsive.

    Example of a DIV element with a background image:

    https://www.w3.org/WAI/UA/TS/html401/cp0301/0301-CSS-DIV-BACKGROUND-IMAGE.html

    Would it be possible to make that image responsive?

    Maybe I can put a table inside it to center the text over the image after that.

    #306931
    Leo
    Staff
    Customer Support

    If the image is inserted using the HTML image tag <img></img> then it should be responsive.

    Let me know if this answers your question.

    #306950
    sdanbu

    Thanks so now I can get the image to work by using the html and the css below but is there a way to put text in the middle of the image using GP?

    I tried putting the image in a div and the text in another… but it wouldn’t work

    https://teamtreehouse.com/community/how-to-create-a-responsive-div-with-a-background-image

    .responsive-image{
    width: 100%;
    background-size: 100% 100%;
    }

    and finally, we serve for every view-port the right image:

    /* Retina display */

    @media
    screen and (min-width: 1024px){
    .responsive-image{
    background-image: url(‘../img/retina.jpg’);
    }
    }

    /* Desktop */

    @media
    screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
    background-image: url(‘../img/desktop.jpg’);
    }
    }

    /* Tablet */

    @media
    screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
    background-image: url(‘../img/tablet.jpg’);
    }
    }

    /* Mobile HD */

    @media
    screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
    background-image: url(‘../img/mobile-hd.jpg’);
    }
    }

    /* Mobile LD */

    @media
    screen and (max-width: 350px){
    .responsive-image{
    background-image: url(‘../img/mobile-ld.jpg’);
    }
    }

    #306953
    Leo
    Staff
    Customer Support

    You would have to use a software like Photoshop to add the texts onto the image.

    That method is actually not making the background image responsive (not possible), it’s simply specifying a different background image at different device break point.

    If you can provide an example of what you are trying to accomplish I can probably give you some advice on how to go about it.

    #307011
    sdanbu

    I am trying something like this
    https://mcbuzz.wordpress.com/2008/10/14/how-to-put-text-on-top-of-image-wordpress/

    <h1 style=”color:black;line-height:18px;padding:20px 10px 2px 20px;”>This is a Sample Headline</h1>
    <p style=”color:black;padding:2px 10px 10px 20px;”>This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.</p>

    When I did that, the image didn’t even appear.

    #307012
    Leo
    Staff
    Customer Support

    Hmm I would still recommend using Photoshop or any image editing software that can add text on to the image.

    The example in the page you provided it’s not responsive since it’s using the background image.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.