Background-image not working correctly? - html

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