Background-image not working correctly?

Question

I am trying to get a background image on some text that heads to the left of the screen whilst the text is on the right. I want it to be a background image so I can do:

background-position: left center;

I have done the same thing just above within the same CSS file, however, this time it doesn't want to work and I cannot work out why for the life of me.

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>

I did the same thing in the in the 'skillset' section but cannot achieve it in the about me section. Here is my CSS for both:

.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%;
}

I cannot see why the background image isn't displaying next to the text. Does anyone else know why?

EDIT: I have now discovered that if I add an image using the tag underneath the text in the HTML, the background image miraculously appears!?!?!

Answer 1

Is this what you want?

I used text-align:right; on .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> 

Updated html structure

 .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> 

Answer 2

I ended up taking a break for a drink (I've been designer/making this website for around 5 hours now) after my break I sat, took a breath and started again with the about section. It was much easier to think now this is what I came up with:

<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, I made a big problem out of something that if I took a break and just thought about it, wouldn't have been a problem. Thanks for everyone's help but I got this one ahah!

Answer 3

why don't styling p and h1 separately?

because you are more flexible at the end. By the way, the section should have an id aboutMe instead of a class name. makes more sense. keep that in mind.

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;
}