How can I re-create this look using CSS ?
I am trying to learn how to render this effect in pure HTML and CSS, with no frameworks. I have tried to study the source code of the page, but it is so complicated.
Here is the background image:
Here is the transparent overlay:
Ideally, I want to just have this in its own DIV.
Can anyone help me re-create the look? It doesn't have to be exact, but I would love to see how they did this, and learn this technique. I especially like how they centered and styled the form to overlay on the bottom.
Note: Individually, I understand the basics of each CSS rule that is probably applied here, ie. backgrounds, padding, margins. I am confused on how to put them all together.
Thanks for looking.
Regards,
John
Here is the background image:
Here is the transparent overlay:
Ideally, I want to just have this in its own DIV.
<div id="pageHeader">
</div>Can anyone help me re-create the look? It doesn't have to be exact, but I would love to see how they did this, and learn this technique. I especially like how they centered and styled the form to overlay on the bottom.
Note: Individually, I understand the basics of each CSS rule that is probably applied here, ie. backgrounds, padding, margins. I am confused on how to put them all together.
Thanks for looking.
Regards,
John
ASKER
Thank you for the reply. I am still trying to achieve this result... lol. I will try again and post my closest attempt.
I think the large background image could be placed in a containing div with no repeat, then the other elements could be relatively positioned within the container div:
<div style="background-image: url('bg.png'); background-repeat: no-repeat;">
<div style="left: 200px; top: 20px"><img src="whynot.png"></div>
<div style="top: 200px"><form>...</form></div>
</div>ASKER
@NerdsOfTech, hey thanks! I will try that.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
NerdsOfTech:
Who are you saying has declared that using a CSS framework is a best practice? Certainly many people find them helpful, but that's not the same thing.
Also who said anything about percentages? Top and bottom margins and padding when set as a percentage are based off of the containing block's width, not its height as one might expect.
Who are you saying has declared that using a CSS framework is a best practice? Certainly many people find them helpful, but that's not the same thing.
Also who said anything about percentages? Top and bottom margins and padding when set as a percentage are based off of the containing block's width, not its height as one might expect.
ASKER
thanks!
Do you have experience using the DOM inspector included in your browser's developer tools? They are quite valuable in seeing how CSS is being applied. However, sites built like that do have a bewildering amount of code to sift through.
There are two main ways to get elements to overlap. The first is using negative margins and the second, which was used in your example, is to use absolute positioning, although it's unclear to me why they chose to since it's just a background image anyway.
As to the horizontal centering, they gave one of the container elements "#main .fusion-row" both a max-width and auto left and right margins.
http://learnlayout.com/margin-auto.html
By the way, they were neglectful in how much text is embedded in that image. But it is rather complex to make that with only the laptop as an image. Unfortunately, vertical centering can be rather complicated to do in CSS.