Фоновое изображение не работает правильно?

Question

Я пытаюсь получить фоновое изображение для некоторого текста, который направляется к левой части экрана, в то время как текст находится справа.Я хочу, чтобы это было фоновое изображение, поэтому я могу сделать:

background-position: left center;

Я сделал то же самое чуть выше в том же файле CSS, однако на этот раз он не хочет работать, и я не могувыяснить, почему ради меня.

HTML:

<section class="skillset">
        <div class="spaceage">
            <h1>-filler-</h1>
            <p>-filler-</p>
        </div>
        <div class="ability">
            <h3>-filler-</h3>
            <p>-filler-</p>
            <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
            <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
            <img src="img/html5logo.png" alt="HTML 5 Logo">
            <img src="img/css3logo.svg" alt="CSS 3 Logo">
        </div>
    </section>

    <section class="aboutMe">
        <div class="aboutMeText">
            <h1>-filler-</h1>
            <p>-filler-</p>
            <p>-filler-</p>
        </div>
    </section>

Я сделал то же самое в разделе «набор навыков», но не смог достичь этого в разделе обо мне.Вот мой CSS для обоих:

.skillset {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    margin-top: 50px;
    background-image: url(img/asteroid.gif);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40%;
}

.aboutMe {
    margin-top: 150px;
    margin-right: 5%;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    background-image: url(img/asteroid.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40%;
}

Я не могу понять, почему фоновое изображение не отображается рядом с текстом.Кто-нибудь еще знает почему?

РЕДАКТИРОВАТЬ: я обнаружил, что если я добавлю изображение с помощью тега под текстом в HTML, фоновое изображение чудесным образом появляется!?!?!

Answer 1

В итоге я взял перерыв на напиток (я занимался дизайном / создавал этот сайт около 5 часов), после перерыва я сел, перевел дух и снова начал с раздела «о».Гораздо проще было подумать, вот что я придумал:

<div class="about">
        <h1>Hi, I'm Jack</h1>
        <div class="aboutTxt">
            <p>filler</p>
            <p>filler</p>
        </div>
    </div>

.about {
    padding: 0 5%;
    background-image: url(img/programmer.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30%;
    margin-top: 225px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 5%;
}

.about h1 {
    margin-bottom: 30px;
    color: #2B9DFF;
    text-transform: capitalize;
}

.aboutTxt {
    text-align: justify;
}

.about h1,
.aboutTxt {
    margin-left: 50%;
    background: rgba(211, 211, 211, 0.1);
}

Tbh, я сделал большую проблему из чего-то, что, если бы я сделал перерыв и просто подумал об этом, не имел быбыла проблема.Спасибо за помощь всем, но я получил этот ахах!

Answer 2

почему бы не стилизовать p и h1 отдельно?

, потому что в конце вы более гибки.Кстати, раздел должен иметь идентификатор aboutMe вместо имени класса.имеет больше смысла.имейте это в виду.

Jsfiddle

https://jsfiddle.net/L0cbe709/

HTML:

<section class="skillset">
  <div class="spaceage">
    <h1>-filler-</h1>
    <p>-filler-</p>
  </div>
  <div class="ability">
    <h3>-filler-</h3>
    <p>-filler-</p>
    <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
    <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
    <img src="img/html5logo.png" alt="HTML 5 Logo">
    <img src="img/css3logo.svg" alt="CSS 3 Logo">
  </div>
</section>

<section class="aboutMe">
  <div class="aboutMeText">
    <h1>-filler-</h1>
    <p>-filler-</p>
    <p>-filler-</p>
  </div>
</section>

CSS

.ability {
  width: 100%;
}

.skillset {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin-top: 50px;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 40%;
}

.aboutMe {
  width: 100%;
  margin-top: 150px;
  margin-right: 5%;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40%;
}

.aboutMe p {
  text-align: right;
}

.aboutMe h1 {
  text-align: center;
}

Answer 3

Это то, что вы хотите?

Я использовал text-align:right; на .aboutMe

.skillset {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin-top: 50px;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 40%;
}

.aboutMe {
text-align:right;
  margin-top: 150px;
  margin-right: 5%;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 40%;
}

<section class="skillset">
  <div class="spaceage">
    <h1>-filler-</h1>
    <p>-filler-</p>
  </div>
  <div class="ability">
    <h3>-filler-</h3>
    <p>-filler-</p>
    <img src="img/xdlogo.svg" alt="Adobe Experience Design Logo">
    <img src="img/pslogo.png" alt="Adobe Photoshop Logo">
    <img src="img/html5logo.png" alt="HTML 5 Logo">
    <img src="img/css3logo.svg" alt="CSS 3 Logo">
  </div>
</section>

<section class="aboutMe">
  <div class="aboutMeText">
    <h1>-filler-</h1>
    <p>-filler-</p>
    <p>-filler-</p>
  </div>
</section>

Обновленная структура HTML

.a {
  text-align: right;
  background-image: url(https://placehold.it/250x150);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 50%;
}

body {
  padding: 15px;
}

<div class="a">
  <h1>This is some textThis is some textThis is some textThis is some textThis is some textThis is some textThis is some text</h1>
</div>