Background Gradient & Aside Problems

I am facing two issues.

First issue is that my background gradient is not taking up the entire length of the page. Instead it is repeating.

Second issue is that my aside element is not taking up the entire height of the page.

HTML and CSS can be viewed in jsfiddle: https://jsfiddle.net/mcsjz4j1/

Hoping you can provide some insight into what I am doing wrong.

Thanks in advance.

Hi there we4321,

try it like this, possibly…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
* {
    margin:0;
    padding:0;
 }
body {
    display: table ;
    width: 100%;
    margin: 0;
    background: linear-gradient(to bottom, rgba(117, 137, 12, 1), rgba(164, 179, 87, 1));
 }
#left-side {
    display: table-cell;
    width: 20%;
    color: #000;
    background-color: #f7f7f7;
 }
#left-side h3 {
    margin-bottom: 20%;
    text-align: center;
 }

#left-side li {
    padding: 2%;
    list-style: none;
    text-align: center;
 }

#left-side hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 }

#content {
    display: table-cell;
    width: 80%;
 }
#content h1 {
    margin-left: 3%;
    color: #fff;
 }
#content li {
    padding: 2%;
    margin: 1%;
    list-style: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
 }

#content li a {
  text-decoration: none;
 }

</style>

</head>
<body> 
<div id="left-side">
 <h3>Aside</h3>
  <hr>
   <ul>
    <li>test</li>
   </ul>
</div>
<div id="content">
 <h1>List</h1>
  <ul class="links">
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
  </ul>
</div>
</body>
</html>

coothead

3 Likes

Coothead’s post solves both your specific issues so I just post this as an example of a full body gradient. :slight_smile:

When using a gradient to cover the body element I prefer not to have it follow the content because the gradient gets stretched on long pages and can ruin the effect. therefore I find the most reliable method (especially for mobiles) is to use the following method.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	background: rgba(117, 137, 12, 1);
}
body:after {
	content:"";
	position:fixed;
	z-index:-1;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background: linear-gradient(to bottom, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
}
</style>
</head>

<body>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>

It applies the gradient to a position:fixed element which is constructed using body:after{} so as not to require any extra elements. The element itself is fixed (which most mobiles understand) rather than trying to use background-attachment:fixed which fails in many mobile browsers.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.