[ishanjainParticipant #9885]

I am trying to have  a spiral like effect on the main page of book card. I would like to know the best way to do that while maintaining the responsive behaviour.

Should i use a spiral image that goes all the way down and use CSS to make it hang out ?? Or should i use a repeating spiral image again sticking out to the left ?

[ahmetsaliKeymaster #9943]

Hi, do you want it to look like a circle like a cd instead of a book?

[ishanjainParticipant #9962]

I am trying to build a diary like effect with spirals, like here in this link – http://javapapers.com/

Head over to http://www.branddiaries.com/development/
The background image you can see currently has some spirals in it on left. You can see them by adjusting the height a bit. I want them to stick out so that the while box gives a diary effect. I would like to know how can i always make only spirals overflow.
Also please tell me the best resolution to keep for this kind of background image.

[ahmetsaliKeymaster #9963]

I don’t think the spirals look good on inner pages since it is more like a brochure effect not more like a diary book. But you can try if you want.

You can use this custom css code to specify bg image for inner pages;

.rm-wrapper > div > div { background: url("your-image-url-here");

[ishanjainParticipant #10084]

I am not planning to include spirals in innner pages. Just the outer page.
The image i am using currently on the URL i shared above has spirals on the left. I just want to know a way to stick them out a little, or overflow outside the coverpage div, so that it shows a diary like effect.
Or maybe i use a small spiral (like – http://www.branddiaries.com/development/wp-content/uploads/2013/11/spiral.png) and make repeat on the left side. This will be good for the responsive design i think. But again i would need to overflow it a bit.

[ahmetsaliKeymaster #10092]

ok, this should work;

#home:after {
content: "";
background-image: url('https://www.branddiaries.com/development/wp-content/uploads/2013/11/spiral.png');
background-position: left top;
background-repeat: repeat-y;
width: 44px;
height: 100%;
position: absolute;
top: 0;
left: -19px;
z-index: 1000; }

[ishanjainParticipant #10280]

Thanks.. that did the job….