CODEWITHSUNDEEP
htmlcss
Caleb Wolff
Caleb Wolff

Reputation: 65

CSS & HTML how to stop linear-gradient from repeating vertically and horizontally on mobile devices

When I use pinch zoom and shrink the size of my webpage on a mobile device, the gradient repeats and I do not want it to. Is there anyway to stop this?

I would rather it resize the gradient as all of my other elements are dynamic and resize appropriately.

Here is my code so far:

html {
  text-align: center;
  min-height: 100%;
  max-width: auto;
  background: #33ccff;
  background: -webkit-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
  background: -moz-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
  background: -o-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
  background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no- repeat;
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

body {
  text-align: center;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  text-align: left;
  font: 12px Arial, Helvetica, sans-serif;
  font-size: 14px;
}

p {
  text-align: left;
}

.off {
  color: #F0FFFF;
}

#header {
  height: 100px;
  width: 960px;
}

#header h1 {
  position: relative;
  text-align: left;
  color: #000000;
  font-size: 45px;
  left: 5px;
  top: 20px;
}

#navigationBar {
  height: 40px;
  background-color: #F0FFFF;
  border-color: #000000;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
}


/* Change the link color to #111 (black) on hover */

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

#navigationMenu {
  margin-top: 0px;
  height: auto;
  background-color: #F0FFFF;
  border-color: #000000;
  border-radius: 25px;
}

#transparentBox {
  position: relative;
  display: block;
  margin: 10px;
  padding: 10px;
  width: max-width;
  height: max-height;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.7);
  filter: Alpha(opacity=0.7);
  border-color: #000000;
  border-radius: 10px;
}
<div id="header">
  <h1>Caleb<span class="off">Wolff</span></h1>
</div>

<div id="navigationBar">
  <ul>
    <li><a href="http://www.calebwolff.us">Home</a></li>
    <li><a href="https://www.facebook.com/calebwolffmusic/" target="_blank">Facebook</a></li>
    <li><a href="https://twitter.com/calebwolffmusic/" target="_blank">Twitter</a></li>
    <li><a href="https://www.linkedin.com/in/caleb-wolff-
    07594aab" target="_blank">LinkedIn</a></li>
  </ul>
</div>

<div id="transparentBox">
  <h1>Hello! Welcome to my website!</h1>
</div>

Upvotes: 2

Views: 2806

Answers (1)

Rich
Rich

Reputation: 3336

This should work for you in all browsers. You were using a combination of shorthand and other css properties that may have been cancelling each other out. 

html {
  text-align: center;
  min-height: 100%;
  max-width: auto;
  background: linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background: -moz-linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background: -ms-linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background: -webkit-linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background: -webkit-linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background: -o-linear-gradient(to top right, #33ccff, #0066ff) no-repeat;
  background:  linear-gradient(to top right, #33ccff, #0066ff) no-repeat;  
  background-size: cover;
}

body {
  text-align: center;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  text-align: left;
  font: 12px Arial, Helvetica, sans-serif;
  font-size: 14px;
}

p {
  text-align: left;
}

.off {
  color: #F0FFFF;
}

#header {
  height: 100px;
  width: 960px;
}

#header h1 {
  position: relative;
  text-align: left;
  color: #000000;
  font-size: 45px;
  left: 5px;
  top: 20px;
}

#navigationBar {
  height: 40px;
  background-color: #F0FFFF;
  border-color: #000000;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
}


/* Change the link color to #111 (black) on hover */

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

#navigationMenu {
  margin-top: 0px;
  height: auto;
  background-color: #F0FFFF;
  border-color: #000000;
  border-radius: 25px;
}

#transparentBox {
  position: relative;
  display: block;
  margin: 10px;
  padding: 10px;
  width: max-width;
  height: max-height;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.7);
  filter: Alpha(opacity=0.7);
  border-color: #000000;
  border-radius: 10px;
}
<div id="header">
  <h1>Caleb<span class="off">Wolff</span></h1>
</div>

<div id="navigationBar">
  <ul>
    <li><a href="http://www.calebwolff.us">Home</a></li>
    <li><a href="https://www.facebook.com/calebwolffmusic/" target="_blank">Facebook</a></li>
    <li><a href="https://twitter.com/calebwolffmusic/" target="_blank">Twitter</a></li>
    <li><a href="https://www.linkedin.com/in/caleb-wolff-
    07594aab" target="_blank">LinkedIn</a></li>
  </ul>
</div>

<div id="transparentBox">
  <h1>Hello! Welcome to my website!</h1>
</div>

I've tested on a mobile devices and it looks great.

Hope this helps!

Upvotes: 1

Related Questions