Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 23, 2014 at 7:28 pm #214042
    maggie247

    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…

    January 24, 2014 at 4:20 am #214286
    Devin

    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

    January 24, 2014 at 5:33 pm #214509
    maggie247

    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, 9 months ago by maggie247.
    January 25, 2014 at 7:18 am #214748
    Ismael

    Hey!

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

    Regards,
    Ismael

    January 26, 2014 at 1:50 pm #215013
    maggie247
    This reply has been marked as private.
    January 27, 2014 at 7:31 am #215179
    Ismael

    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

    January 28, 2014 at 4:11 pm #215849
    maggie247

    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…

    January 29, 2014 at 7:23 pm #216566
    Devin

    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.

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