background responsive

Hi,
I have a little problem: I set the image for an article (extended article). The image appears under the title, and if I look with browser, I see
.one-page-layout .bigtitle.has-bg {
background-size: cover!important;
height: 520px;
line-height: 560px;
margin: -55px 0 50px 0!important;
text-align: center;
}
The problem: when I look the picture in another smaller screen, the image disappears behind the sidebar.
I try to change the "cover" parameter with "contain" . Not good, because the image is repeated several times.
How can I change it, to make the picture completely responsive?
Thank you!

I have solved part of the problem , it was the layout settings of the template. The image not disapear behind the sidebar, but it's not reponsive..:-/

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi, I sent you a message, do not know if you've received ... I had sent others without answer.
Thanks!

Jo

Hi

Yes I did. Please add this code to override.css:

Code: Select all

#gkHeader {
    background-size: 100% auto !important;
}


but as You will see at small screens You will see a lot of empty space under it, so You may want to add:

Code: Select all

    background-repeat: repeat !important;


Thanks! I did, but nothing happens. After, I write:
one-page-layout .bigtitle.has-bg {
background-size: 100%auto!important;
height: 520px;
background-repeat: no-repeat;
line-height: 560px;
margin: -55px 0 50px 0!important;
text-align: center;

BUT, the picture is repeated several times. Not being a texture, that's not good
You think there is some solution?

Another little problem: the inset module, when I see the site with the mobile phone, looks small and cut on the right side.. why? I have some settings wrong?
thanks!!

Hi

First of all. id this the background You have in mind? (image attached). If yes than it's for sure not using a selector ".one-page-layout .bigtitle.has-bg", so Your code will not work.

If You do not want the image to be repeated than use code like this:

Code: Select all

#gkHeader {
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}


sorry.. I add the rule ".one-page-layout .bigtitle.has-bg" at the setting of the menu item (119). And your code at the template advanced settings (custom css code).. I worng something? My image looks as in the attachement...
(thanks!)

Hi

I'm sorry, I still do not understand what do You want this background to looks like. I can see the code I proposed worked, but I alos cannot find a page You've made Your screenshot on, so maybe it's not working on that page ?

Hi

Just saw Your PM. I thought problem was on frontpage only, now I see You were asking about one of subpages, here is a code to center header image:

Code: Select all

.one-page-layout .bigtitle.has-bg {
    background-position: center center !important;
}


that should make the image always visible.