[sharp-imageParticipant]

Hi,

I have one homepage with 5 sections called: #x-content-band-1 till #x-content-band-5
Every sections has for now a test bg image. (bg-test-1024×513.png)
When I place a colum with text or image on the section the bg image is rezising and gets bigger what is not good.
Not sure but must I make the backgrounds sticky, absolute or fixed? The 5 background sections are some kind of timeline and the bottom of section 1 is fixed on the top of section 2.

many thanks
Bouke

[FriechModerator]

Hi Bouke,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[sharp-imageParticipant]

Hi,

This is the test url: http://www.datainbeeld.com/kijk-leren/onderwerp1/

The bg of the first section has a padding of 0px and a row with a top of 600px. The 2nd row has a margin bottom of 160px.
The first section is now almost the same as the rest of the sections but I’m not sure this is the right way to do this…
(The 2nd till the fifth section has a padding bottom from 1100px — these sections has no rows yet).
I’m looking for a option that no matter how many rows I add in a section, the background will not scale.
Not sure or this is a .contain option with a 100×100% in the css…

Many thanks!
Bouke

[Paul RModerator]

Hi Bouke,

Yes, you can add background-size: contain; in the style field of your content band element.

Contain means – Scale the image to the largest size such that both its width and its height can fit inside the content area

You can try other options from the link below

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Hope that helps.

[sharp-imageParticipant]

Hi,

Thanks for your explantion.

I add the following css to the stylesheet:

.x-section.bg-image{
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

But now the 2nd section is resized to the minimum..
http://www.datainbeeld.com/kijk-leren/onderwerp1/

I’ve tried background-size: 100% 100% cover; but that blocked the height of the container.

Any idea?

Thanks
Bouke

[ZeshanMember]

Hi Bouke,

Yes, this is because the height of the second content band is 25px while its width is 100%, e.g. 1920px. You can try using background-size: cover; for second content band only as inline CSS under Style field in its settings.

Thanks!

[sharp-imageParticipant]

Hi,

Thanks!
Got it for deskop resolution.

http://www.datainbeeld.com/kijk-leren/onderwerp1/

.x-section.bg-image{
background-size: contain;
height: 903px;
background-position: center;
}

}
}
@media (min-width:980px){
.x-content-band.bg-image {
background-size:cover;
heigth: auto;
background-position: center;
}
}

But resizing the screen give white gaps. Tried the @media css above but that give not right result.

thanks,
Bouke

[ZeshanMember]

Hi Bouke,

That’s the same reason as mentioned above. That is, by using Contain, background image tries to fit within its container without loosing proportions and getting cropped, but it may leave some blank areas to the sides depending on screen size.

You can perhaps use background-size: cover; on smaller screen sizes to avoid gaps:

@media (max-width: 979px){
    .x-content-band.bg-image,
    .x-section.bg-image {
        background-size: cover;
        heigth: auto;
        background-position: center;
    }
}

Thanks!

[sharp-imageParticipant]

Hi,
Many thanks, but there come no changes with the @media (max-width: 979px){ style.
Only when I change the deskop style from contain to cover the background will resizing for al formats.
Do you have an idea how I get the bg-size: cover to the rest of the formats outside the desktop style?
Tried to add this @media style at the integrity-light.css file but also that give not the good result.

greetings
Bouke

[ChristopherModerator]

Hi there,

If you want to set it globally for all devices, add this :

    .x-content-band.bg-image,.x-section.bg-image {
        background-size: cover !important;
        heigth: auto !important;
        background-position: center !important;
}

But if you wish to set it for mobiles and tablets only, then add this :

@media (max-width: 979px){
    .x-content-band.bg-image,
    .x-section.bg-image {
        background-size: cover !important;
        heigth: auto !important;
        background-position: center !important;
    }
}

Hope it helps.

[sharp-imageParticipant]

Hi,

Many thanks for your support!
It’s working now on desktop as well on mobiles and tablets. For Chrome I set the max-width into: 1600px;
However I’ve add the css in integrity-light.css file. In the custom CSS section the changes had no effect…
Is this a problem with a next X version update?

Greetings Bouke

[RupokMember]

Hi there,

Thanks for updating! It should work on the Customizer. However we have noticed some issues after upgrading to WordPress 4.3. Let’s wait a couple of days to get the X update. Hopefully everything will be sorted out then.

Thanks

[Author]

Posts