Image with CSS - image manipulation and title

2

I want to put an image behind the title at the top of the page, putting the title right and centered, and a paragraph on the left containing a few words, but I have a problem: I can not put the image behind the title without using the position: absolute; property which does not give the title right.

Follow the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png" type="image/x-icon">
        <link rel="stylesheet" href="arquivo.css" type="text/css" />
        <title>titulo</title>
    </head>
    <header>
        <h1>título</h1>
        <p>blá blá blá blá blá blá blá blá blá blá blá blá</p>
        <p>blá blá blá bláblá blá blá bláblá blá blá blá </p>
    </header>
    <div id="imagemtopo"  style="width:30%">
        <img src="img/imagemtopo.png" alt="Logotipo">
    </div>
    <body> 
    </body>
</html>

Follow the CSS code:

.h1 {
    position: right;

}

#imagemtopo{
    width: 120em;
    height: 20em;
    min-height: auto;
    position: absolute;
}

As an image speaks more than a thousand words, here is one for a better understanding of my problem:

    
asked by anonymous 20.09.2017 / 12:42

1 answer

0

Instead of adding the img tag in the body of the html, put it as the background of the body, like this:

body { background-image: url("img/imagemtopo.png"); }
    
27.09.2017 / 00:27