• Closed
  • Paul Jabas
    Spectator
    March 1, 2014 at 6:10 pm #8292

    I just realized, that the background image i am using in the alora theme background options under “background image for main content area” isn’t flexible, when browser size is reduced.

    In firefox inspect elements option I used for trial the background-size:100%; option and it worked. But don’t know, where to put it in css. Please advice. Thanks

    Roman
    Spectator
    Posts: 3147
    March 2, 2014 at 4:04 pm #9213

    please provide me your website URL

    Paul Jabas
    Spectator
    Posts: 11
    March 3, 2014 at 2:29 pm #9218

    .

    Roman
    Spectator
    Posts: 3147
    March 3, 2014 at 9:29 pm #9219

    cannot see the background image

    Paul Jabas
    Spectator
    Posts: 11
    March 4, 2014 at 9:02 am #9226

    Weird. to be precisely: it’s about the image used as background for main content area with the sticker “interim management excellence” on it.

    Roman
    Spectator
    Posts: 3147
    March 4, 2014 at 12:17 pm #9227

    insert this in the Custom CSS field:

    Code:
    #main {-webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;}
    Paul Jabas
    Spectator
    Posts: 11
    March 6, 2014 at 7:15 pm #9242

    Hi Roman,
    thanks again, it works fine. There is still one issue:

    I am using the background image with a height of 340px. To achieve that the content is shown right below the image, i have set the “page content top padding” value in general options to 360px.

    The gap between image and content grows, the more i minimize browser window. Any idea to glue the content to the bottom of the image in constant distance?

    Roman
    Spectator
    Posts: 3147
    March 7, 2014 at 1:53 pm #9243

    try to use a percentage padding, e.g. 10% and see if it helps.

    Paul Jabas
    Spectator
    Posts: 11
    March 8, 2014 at 6:37 am #9245

    Thanks. it works. the custom CSS I am using is: #content {padding-top:40%;} #sidebar {padding-top:45%;}