CODEWITHSUNDEEP
htmlcss
Marcou
Marcou

Reputation: 23

How to position correctly using background-image?

I want to use a custom underline for my h1 and I decided that the best way is to use the property: background-image. Everything went well until I needed to position the background right under my h1 (Ce e asta?).

I can move the image around the X axis but when I try to move it around the Y axis the image simply disappears.

Here's a capture

enter image description here

Searched the internet for an answer and to no avail.

<div class="Title">
  <h1>Ce e asta?</h1>
  <div class="Paragraph">
    <p>Dat fiind faptul că următoarele alegeri parlamentare (legislative) vor avea loc de abia în anul 2021, m-am decis sa creez acest site pentru a ne putea alimenta cu speranță. <br>Speranță pe care ne-o vom dărui unul altuia. Ea va fi transmisă prin intermediul
      umorului, pentru că el de obicei reprezintă un înveliș pentru mesajul serios și intenționat care se află de fapt în spate. </p>
  </div>
</div>

.Title {
  margin: 75px;
  background-image: url("Images/Artboard 1.png");
  background-size: 100%;
  background-position: -500px;
  background-repeat: no-repeat;
}

h1 {
  font-family: "Open sans", sans Cambria;
  font-size: 37px;
}

p {
  font-family: "Open sans", sans Cambria;
  font-size: 24px;
}

.Paragraph {
  margin-top: 25px;
}

Upvotes: 2

Views: 114

Answers (2)

Mosh Feu
Mosh Feu

Reputation: 29317

If I understand you correctly, you need to set the background on the h1, not for all the content. In this case, you can attach the background to the bottom of the h1. Obviously, it will be better to get a better quality image for that "border".

body {
  background: #cccccc
}

.Title {
  margin: 75px;
}

h1 {
  background-image: url(https://i.sstatic.net/mdcx0.png);
  background-repeat: no-repeat;
  font-family: "Open sans", sans Cambria;
  font-size: 37px;
  background-position: left bottom;
  padding-bottom: 35px;
  background-size: 54% auto;
  margin-bottom: 0;
}

p {
  font-family: "Open sans", sans Cambria;
  font-size: 24px;
}

.Paragraph {
  margin-top: 25px;
}
<div class="Title">
  <h1>Ce e asta?</h1>
  <div class="Paragraph">
    <p>Dat fiind faptul că următoarele alegeri parlamentare (legislative) vor avea loc de abia în anul 2021, m-am decis sa creez acest site pentru a ne putea alimenta cu speranță. <br>Speranță pe care ne-o vom dărui unul altuia. Ea va fi transmisă prin intermediul
      umorului, pentru că el de obicei reprezintă un înveliș pentru mesajul serios și intenționat care se află de fapt în spate. </p>
  </div>
</div>

Upvotes: 1

Robin
Robin

Reputation: 5427

You need background image under h1, so you need to define background-image in the .Paragraph class like this. This works, try it.

Check Demo in Codepen

.Title{
  margin: 75px;
}
.Paragraph {
  margin-top: 25px;
  background-image: url("https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg");
  background-size: 100%;

  background-repeat: no-repeat;
}
h1{
  font-family: "Open sans", sans Cambria;
  font-size: 37px;
}
p{
  font-family: "Open sans", sans Cambria;
  font-size: 24px;    
}

Upvotes: 1

Related Questions