Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1139135

    Hi,

    I’ve created images which are changing when hovering. When I make screen smaller the image is wider than the column. Is there a way to make de image responsive? I can make image width and height smaller when screen is 1000px wide for example, but than I have to do that for every px. Is it possible to make the image stretch column but not go over the column width?

    This is CSS code im using:

    #maarten {
    background-image: url('link image 1');
    height: 334px;
    width: 334px;
    background-size: cover;
    }
    
    #maarten:hover {
    background-image: url('link image 2');
    }

    Thanks a lot!

    #1139524

    Hey jannnnnneke,

    You could try something like this:

    #maarten {
    background-image: url('link image 1');
    height: auto;
    width: 100%;
    background-size: cover;
    }

    If you want to target smaller screens then you can place it inside of a media query:

    @media only screen and (max-width: 767px) {
      your code goes here
    }

    Best regards,
    Rikard

    #1139729

    Hi!

    Now I have:

    #maarten {
    background-image: url('image link');
    height: auto;
    width: 100%;
    background-size: cover;
    }
    
    #maarten:hover {
    background-image: url('image link');
    }

    But the image is totally gone now. Any idea why? See website in private data!

    Thanks!

    #1140559

    Hi,

    You have two elements with the same ID on that page, try to fix that first please.

    Best regards,
    Rikard

    #1192367

    Hi! Sorry for the late reply but now working on this again. I got two ID’s with the same name because one element is not visible at small screens and the other not on big screens. Is that a problem when it’s the same element? Now changed the ID and tried your css code but the image is gone again.

    Any ideas? See website.

    #1192487

    Hi,

    I see that you have changed the ID for mobile now, and the background is showing fine on my end. Did you manage to get it working?

    Best regards,
    Rikard

    #1192518

    Hi! The background is working, but that has been working all the time. The only thing thats not working is background-size: cover. When you make the internet browser on desktop smaller you see that sometimes the image is bigger than the column. Now i’ve changed the size for some different screen sizes but it should be on every screen 100% with of the column.

    You understand me now?

    And another question: what css code can i use to make the picture a little bit fade into the other?

    Thanks a lot! Janneke

    #1192593

    Hi,

    I think that is happening because you have specified a width for the div, setting it to auto would likely help:

    #maarten {
        background-image: url(your-image.jpg);
        height: 334px;
        width: auto;
        background-size: cover;
    }

    Best regards,
    Rikard

    • This reply was modified 3 years, 11 months ago by Rikard.
    #1199092

    Yes! That’s working, but now I would like to center the image and make him fit the column if you understand what I mean. When I make the browser smaller the image is not totally visible anymore and when the layout changes to 1 column the image is too small for the whole column.

    Hope you understand me. Open the link in your browser and then make the screen smaller. The image of Maarten (the first one) is the only one i’ve changed for now.

    Thanks a lot!

    #1201248

    Hi jannnnnneke,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #maarten-mobiel, #karin {
        margin: 0 auto;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

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