How can i make this in CSS and HTML?

I'm trying to make a page in HTML and CSS that looks something similar to this picture i made : Image

but whenever i try to do it , the content div goes behind the header div and i should do margin-top to get it down, but i think that it's a bad idea for responsive design...

this is the CSS code i tried :

.header{
width:83%;
height:62%;
background: url('bg.jpg');
position:fixed;
}

any help will be appreciated , thank you. =)