I have 2 background images I want to scroll, and I want the text to stay within the background image as it scrolls. Right now the text is just laying on top of the images as it scrolls, and It's not very crisp. I've been researching for a few hours and cant seem to get it right. I've seen this done hundreds of times online before, but when I go to make it for myself I cant seem to find any examples, or tutorials on how it's done!
The background images also don't stay in place when I scroll. Is there a way to make the page stop scrolling until both images and the text have been fully scrolled through?
Heres a jsfiddle: https://jsfiddle.net/wf0vyj9w/ (having a hard time getting it to work...)
Heres the github: https://github.com/Darkstar93/Resume
Heres the code:
.sprintxp {
background-image: url("../images/cell.jpeg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
color: yellow;
text-shadow: 2px 1px 1px #4d4d4d;
padding: 40px;
max-width: 100%;
}
.mensxp {
background-image: url("../images/suits.jpeg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
color: white;
padding: 40px;
text-shadow: 2px 1px 1px #4d4d4d;
}
#sprintlogo {
width: 30%;
height: 100%;
}
#menslogo {
width: 20%;
height: 100%;
}
/* Education */
#uvulogo {
width: 30%;
}
#thinklogo {
width: 30%;
}<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp">
<img src="images/sprint.png" id="sprintlogo" alt="sprintlogo">
<p>Technical Consultant</p>
<ul>
<li>Performed software and hardware repairs on devices which reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the cell phone industry and memorized
new company promotional plans on a monthly basis, resulting in less churn rate and high customer satisfaction.</li>
</ul>
</div>
<div class="mensxp">
<img src="images/mens.png" id="menslogo" alt="menswarehouselogo">
<p>Sales Associate</p>
<ul>
<li>Improved store displays by implementing my personal designs and creativity.</li>
<li>Provided all customers with outstanding customer service.</li>
<li>Product knowledge leader for all new merchandise and trends in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales representatives.</li>
</ul>
</div>Just use background-size: cover in your css.
(I set my own background images since you didn't provide any in your fiddle):
.sprintxp {
background-image: url("https://www.planwallpaper.com/static/images/violet-vector-leaves-circles-backgrounds-for-powerpoint_PdfkI4q.jpg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: yellow;
text-shadow: 2px 1px 1px #4d4d4d;
padding: 40px;
max-width: 100%;
}
.mensxp {
background-image: url("http://www.designshock.com/wp-content/uploads/2015/02/prisma.jpg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
padding: 40px;
text-shadow: 2px 1px 1px #4d4d4d;
}
#sprintlogo {
width: 30%;
height: 100%;
}
#menslogo {
width: 20%;
height: 100%;
}<div class="container">
<div class="top">
</div>
<div class="cover">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet sagittis quam, eu consequat ligula porta ut. Nam maximus fringilla tincidunt. Proin at quam sollicitudin felis tincidunt eleifend. Nulla rhoncus erat vitae dui fermentum, in venenatis
metus tincidun</p>
</div>
<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp">
<img src="images/sprint.png" id="sprintlogo" alt="sprintlogo">
<p>Technical Consultant</p>
<ul>
<li>Performed software and hardware repairs on devices which reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the cell phone industry and memorized new company promotional plans on a monthly basis, resulting in less churn rate and high customer satisfaction.</li>
</ul>
</div>
<div class="mensxp">
<img src="images/mens.png" id="menslogo" alt="menswarehouselogo">
<p>Sales Associate</p>
<ul>
<li>Improved store displays by implementing my personal designs and creativity.</li>
<li>Provided all customers with outstanding customer service.</li>
<li>Product knowledge leader for all new merchandise and trends in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales representatives.</li>
</ul>
</div>