0
I can’t color either the image or the text. Like a slider.. of the header.
.topo {
background-color: azure;
}
.img {
float: left;
width: 25%;
}
.titulo-principal,
p {
font-size: "Open Sans Condensed", "Arial", sans-serif;
text-align: center;
}<header class="topo">
<img src="img/logo.png" alt="Logo" class="img" />
<h1 class="titulo-principal">Hostsite VH</h1>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas consequatur odit assumenda, rerum</p>
</header>2
There are several ways to do this, the one I think will be most suitable is to put in the picture position:absolute and adjust it to position using top and left
Follow the example
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topo {
background-color: azure;
position: relative;
padding: 1rem;
}
.img {
position: absolute;
max-width: 25%;
top: 50%;
left: 30px;
}
.titulo-principal,
p {
font-size: "Open Sans Condensed", "Arial", sans-serif;
text-align: center;
margin: 0 auto;
max-width: 50%;
}<header class="topo">
<img class="img" src="https://placecage.com/100/100">
<h1 class="titulo-principal">Hostsite VH</h1>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas consequatur odit assumenda, rerum</p>
</header>I did mine and it’s still the same :/
@thaty vc put position:relative in the class . top ? If you copied exactly the code I put here it would not have worked ai tb...
I think I did it. I’m actually not happy with the hahaha logo and other little things. But thank you so much for the help, really!
@thaty in the beginning is like that, then with the time you will figure out how to do in the code exactly the things that are in the layout. It takes time and practice... If you believe that this answer solved your problem consider mark it as accepted in this icon ✔. So it doesn’t stay pending on the site as unresolved question. You can remove this vote at any time if you want, or put it in another answer that arises and you find more suitable for your case. And you can ask on the site whenever you need, just remember to include in the question all the details, code and image if applicable ;)
Thank you, Ugo!
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
What would be the expected result?
– Woss
Try to explain the question better. I couldn’t understand what you want to do
– Eduardo Ribeiro
I would like to make a header with a background color, and leave the image at the bottom a little bit off that background. The way I did it here, I just get the text with the background of the color I put there, and the line of the image doesn’t.
– thaty
Would you be able to edit your question and include an image of the layout you want? From what I understand you want a piece of the image to stay on the background color and another part of the image to stay out of that background color, that’s it?
– hugocsl
That’s exactly it. I just got the picture of how it looks on you. But I want that little blue color there to take the image too and part of the image to stay out of the blue .
– thaty