Need general help to style a page

[terislater]

Here is my page: http://terislater.com/landingpage-draft/

I want the opt-in information to appear on the left page of the book which is the background image. I also want to make sure that the formatting isn’t lost (responsive design) on smaller screens. I don’t have any clue on how to start. I’m not a web designer, so I need responses to be pretty elementary if it’s really techy.

Thanks in advance!

[ruenel]

Hello There,

Thanks for writing in! What you have in mind is too complicated. You must first understand how background images works and how it will be displayed in different screens differently.

I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

To fully achieve full responsiveness, the wood or table and the notebook should be in different layers which means that you will have it in two different image. The wood or table will be the section background and the notebook will be the background of the row where in it contains the columns. Having it this way, you can make sure that the form will always be inside the notebook.

Hope this make sense.

[terislater]

That makes perfect sense. I figured the response would be along these lines. I’ll see if I can make my own stock image for the background that would allow for layers as you mentioned. Thanks!

[ruenel]

You are most welcome!