Adding a background to top of page

1

hi…

How do i add a background image to the top section of a page, which will have another image on top of it?

I’ve tried to put the image into the < body > ,it works but it fills up the entire page.

What i am after is 3 sections to my page, The top section has the title with a picture of my subject, sitting on top of a background.

A middle section filled with text, no background images, and a third section at the bottom with some text and social links also with no background images

This is only a personal project for testing what i have learnt, but don’t think i have come across a tutorial teaching me how to split a page up?

Hope that makes sense, appreciate any advice

My testing project

bere in mind this is my 4th day learning code, my code layout is quite messy and simple, i’ve added a note in the code to show where the img should start and end.

Thanks

2

It would help if you had a link to a project or posted your code. That said, if you want a background image you need to put the image in a certain position (in its own element) and adjust the opacity, like example here.

Relevant code (quote-box was my element for the larger area):

#quote-box:before { 
 content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    background-image: url('https://data.whicdn.com/images/324985350/original.png');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}