Archived

This topic is now archived and is closed to further replies.

  • 0

Citi Theme Break Images repeating

Question

Posted · Report post

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.

 

post-39244-0-81675000-1367735706_thumb.j

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

 

 

post-39244-0-23585100-1367892228_thumb.j

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites