Jump to content


Photo
Citi Theme

Break Images repeating



Best Answer progressive01 , 07 May 2013 - 12:31 AM

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

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 05 May 2013 - 06:35 AM

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.

 

Attached File  Screenshot.jpg   22.48KB   2 downloads

 

 



#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 05 May 2013 - 01:03 PM

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.



#3 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 06 May 2013 - 12:52 AM

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.



#4 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 06 May 2013 - 12:59 PM

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.



#5 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 07 May 2013 - 12:31 AM   Best Answer

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



#6 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 07 May 2013 - 02:04 AM

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.

 

 

 

Attached Files



#7 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 13 May 2013 - 01:22 AM

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



#8 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 13 May 2013 - 01:29 AM

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.



#9 progressive01

progressive01

    Advanced Member

  • Members

  • 81 posts

Posted 13 May 2013 - 01:40 AM

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.



#10 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 13 May 2013 - 12:54 PM

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







Also tagged with one or more of these keywords: Citi Theme