Citi Theme Break Images repeating

[progressive01 20]

Hi Nick,

 

I am loving the theme. One thing I am finding is that the break images, especially the ones lower on the page are repeating - seems worse on mobile and ipad when in portrait. I have started off with image the exact size you recommend and then amended to a smaller height and nothing changes this. Any way to stop the repeat - the images look great except when this happens.

 

 

 

[beardedavenger 158]

Yes thats correct they do repeat vertically or else by the time you scroll down the image is gone as it's already moved off the page due to the nature of parallax.

[progressive01 20]

Hi Nick,

 

I have switched off the parallax effect option, that seems to have stopped them repeating.  Not sure what the parallax did on this theme (my ignorance I expect). Also is there a way we can make the height the breaks larger. Mine are quite skinny and I would like to make them thicker to show more of the picture on larger screens.

[beardedavenger 158]

The parallax works like this, as you scroll, up or down, it moves the background position of the image up or down justa  bit. It gives the feeling of depth. While there are no options to increase the height, you can do very easily with CSS.

[progressive01 20]

Thanks Nick, I shall have a play with that. Love the theme.

[progressive01 20]

Thanks Nick. I tried this

 

.citi-break-3 {
    min-height: 500px;
}

which made the break different, but kept the background image the same size, so gave a blank space under the section of the image shown. (screenshot attached)

 

I have tried to amend the background image size with a range of CSS, but no luck.

 

Would appreciate any help so I can see if this will enhance the design. I feel will be useful when you have images that need more of them shown otherwise don't make sense on a large screen.

 

 

 

[progressive01 20]

Hi Nick - Any chance you can help me out with this please.

[beardedavenger 158]

THis is why the image is repeated. By the time you scroll down the parallax has already shifted the image up to far. Try turning off the parallax.

[progressive01 20]

Hi Nick,

 

Yes, I turned the parallax off and fixed the repeating, but I was still trying to increase the min height of the break, as on a large screen it turns into just a slither and would look visually better if there was a min height. I have tried this as below.

Thanks Nick. I tried this

 

.citi-break-3 {
    min-height: 500px;
}

which made the break different, but kept the background image the same size, so gave a blank space under the section of the image shown. (screenshot attached)

 

I have tried to amend the background image size with a range of CSS, but no luck.

 

Would appreciate any help so I can see if this will enhance the design. I feel will be useful when you have images that need more of them shown otherwise don't make sense on a large screen.

[beardedavenger 158]

There needs to be a height on it, not a minimum height. If it's not working try forcing !important.