Image with CSS - image and title manipulation

Asked

Viewed 1,036 times

2

I want to put an image behind the title at the top of the page, placing the title to the right and centered and a paragraph to the left containing some words, but I have a problem: I can’t put the image behind the title without using the property position: absolute; which makes it impossible to place the title on the 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>

Follows CSS code:

.h1 {
    position: right;

}

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

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

inserir a descrição da imagem aqui

css image
  • 1

    I don’t quite understand what you want. But will putting the image as background does not help you leave it behind the title without using position: Absolute?

  • It would be better to put two images, one of how you have it now and the other of how you wanted it to be. This helps clarify why you will answer the question and makes sure you do not have answers that do not meet your expectations

  • @Luisishenriquefaria I put an image to clarify the question.

  • Cool! Tried to do like I said? It will work.

  • I agree with @Luíshenriquefaria . background-image in the <header> solves the problem elegantly. You can also control how much of the image appears, etc..

  • position: right; there is no.

Show 1 more comment

1 answer

0

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

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

Browser other questions tagged css image

You are not signed in. Login or sign up in order to post.