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

    I have a page with a color section, in wich I have a background image. When you scroll the page, the image is fixed. Thats working fine.

    I have two questions:
    – Can I give the image my own % height in stead of the 25% / 50% or 75% of the browsers height? I can’t find it in the css
    – The image is not getting smaller when I resize my window. In other words: I want the background image to be a 100% width of the browser width, or can I set a different width for mobile… Now my image is to big for mobile devices and is not responsive at all… How can I fix this?
    I tried several settings in the editor…

    #214286

    Hey maggie247!

    If you give the color section a unique ID in the field available for that on the color section editor you can then target that ID and give it a specific pixel height. Ex:

    
    #mycolorsection {
    height: 50px;
    }
    

    The background image is a bit more complex. By itself, you are under the constraints of the background property with css. For your question this means that no, you can’t make it adapt to the screen size because its fixed in the background with regard to the viewport.

    Best regards,
    Devin

    #214509

    yeah, I tried that, I’ve given the section a unique name, referred to it in the custom css, but it only seems to apply on smaller viewports, like ipad or mobile width… when my browser is in desktop it just shows the default height I choose in the editor (for instance 25% height)…
    when I make the browser smaller, it refers tot the height in the custom css.

    as for the background image: found out that this css did some of the trick for smaller viewports, but not exactly what I wanted…
    .avia-section
    {
    background-size:360%;
    }

    • This reply was modified 10 years, 11 months ago by maggie247.
    #214748

    Hey!

    Can you please give us a link to the page with the color section?

    Regards,
    Ismael

    #215013
    This reply has been marked as private.
    #215179

    Hi!

    Please try to use this for desktop view:

    @media only screen and (min-width: 1024px) {
    #mycolorsection1 {
    height: 1000px;
    background-size: 100%;
    }
    }

    Adjust the values as you please.

    Cheers!
    Ismael

    #215849

    yeah, it doesnt work. I can set the css media queries for my iphone and ipad (portrait and landscape) just fine, but for desktop large screens it doesnt work…

    #216566

    Your child theme style.css has a missing bracket so all the css after it is not actually being executed. You can, in the future, inspect your color section with dev tools in the browser and if the css isn’t showing as effecting the element then the css file has an issue.

    In your case, look for this block:

    /*fix header dissapearing on ipad */
    @media only screen and (max-width: 1024px) {
    /* Add your Mobile Styles here */
    h1 {
    font-size: 24px;
    padding-right:30px;
    }
    

    It needs to have a closing bracket on the media query.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘fixed background image and width’ is closed to new replies.