First let’s establish what you mean by the “same position”.
As you resize the window, the size, space and aspect of the available area changes, so something has to give in one way or another.
So what we need to know first is, what must remain fixed, and what will be allowed to adjust and resize/move.
Perhaps to illustrate this clearly, rather than just one screen shot, show one for a large screen, and another for a small one.
What should it look like when the viewport is half as tall?
Do those straight lines get smaller and smaller or do they stay the same thickness. e.g do the lines scale with viewport width and height or do they simply get cropped at the top and sides but always remain the same thickness?
It’s quite hard to envisage a ‘use case’ for this but the answer will rely on percentages based on viewport width and height and will assume that you never have more content than the viewport itself.
This example gets rid of the second pseudo-element by re-sizing the first pseudo-element and applying a three-color linear gradient to it. It’s the first time I’ve used calc in a gradient. It validates and works beautifully in Firefox.
If all you are interested in is in learning how to use absolute positioning and the resulting layout is not going to be used to hold content or be part of a real layout then ignore the rest of my post as your question has been answered by Ron and Sam.
Sam’s and Ron’s first examples are basically fixed height elements and cannot hold real content as they will not stretch. Ron’s second example is more related to the questions I was asking as it fills the viewport and scales with viewport height. However Ron’s example cannot hold real content either or this happens.
As you see that is not a viable layout for real content but this is no matter if you are just practicing how to place things. When I answer a question on the forums I ma always thinking of the ‘use case’ and what happens next. There’s no point in offering solutions that can’t work in the real world unless as I already mentioned this is just practice.
If indeed you wanted that pattern just to be a background for your content and each half doesn’t hold other content then you would need other methods.
For example we can do the whole thing without any extra html at all (based on Ron’s fine example).
You can put content into that example and the design won’t scroll away )although you will need to ensure the z-index of your content is higher than the other positioned elements).
Your point of view is understandable and very professional I think. I understand that I have to be more specific in order to get more accurate answers.
The solution that I am working on, is to put some content in the sections, but just something small at the vertical side for each div, the teal and the yellow.
Which I made it by placing some divs on Sam’s solution, inside the “top” and “bottom” div, with absolute position too.
So it’s not full content that’s for sure.
But as I am thinking it, I would love to know a solution where the 2 divs can hold real content and it’s not something just for practicing this.
Is there a better way to make the height of the divs adjusting in the content that is inside of them?
Would you mind double-checking my code, @PaulOB? Both of my examples should hold real content (whereas Sam’s did not for me). Both of mine trigger a scroll-bar when/if the text content exceeds the bottom of the browser window. I used z-index to position the colored pseudo elements behind the .outer element which is where the text should reside.
Do you want content in the top div and for the top div to stretch with the content and then pushes the bottom div further down the screen. If so that’s what Ron’s first example will do (see my screenshot above).
I suppose the main question is what do you want to happen and how should it look when both sections have content that exceeds their initial dimensions? We need to know what you are trying to do next and what your main aim for the design is?
If you only have a couple of words or a couple of headings then it could be easy but if you have multiple content sections as any normal website then you need a defined plan of attack
Perhaps a rough drawing of your finished product would help us in pointing the way.
I would just play around with what you have so far and see what happens?
When you run into a problem you can post here and ask how to do it better or how to handle it properly.
My initial thoughts are whether you have 2 separate sections (top and bottom) and whether you have content in each section that stays with each background?
Or whether the design we see is just the background to the viewport and does not relate to content (as in my example) and you can just enter content as you wish.
I think you need to progress with your design a bit further so we can see where you are heading. Generally though its content that comes first and then you build a design around the content (or hand in hand with content) rather than starting with a flat design and then trying to fit content to the design.