Thanks for bearing with me on my very first question. I'm learning Bootstrap as I go (I'm a designer who is learning code), lots of trial and error, but I'm loving it. So here's the deal:
I'm redesigning my company website, and adding media queries to my CSS for mobile devices. When I add and adjust background-position, I can see the adjustments immediately in Dreamweaver and in my live preview. But in my mobile devices (iPad and iPhone 5) the X axis shifts, but not the Y axis.
This is my test site: http://test.lighthousesoftware.com
What should I do so that I can see the waves background in the mobile screens (I want to shift the image up the Y axis)?
Here's my HTML:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">Automated Business Process,<br>Your Business Intelligence </h1>
<hr>
<p>Prism vice artisan, venmo migas you probably haven't heard of them crucifix meditation organic marfa cardigan. Dreamcatcher banh mi synth, organic flannel hell of gastropub keffiyeh marfa poke roof party. </p>
<a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
</div>
</div>
</header>
And my CSS:
header {
position: relative;
width: 100%;
min-height: auto;
background-size: cover;
background-image:
url("https://lssinc.com/files/original/header.jpg");
text-align: center;
background-attachment: fixed;
background-position: 25% 0;
color: white;
height: 80%;
}
@media only screen and (max-width: 1024px) {
header {
background-image: url(url("https://lssinc.com/files/original/header.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 20px;
background-attachment: fixed;
color: white;
height: 80%;
text-align: center;
}
}
@media only screen and (max-width: 320px) {
header {
background-image: url("https://lssinc.com/files/original/header.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: -70px -80px;
background-attachment: fixed;
color: white;
height: 150%;
text-align: center;
}
}
