CODEWITHSUNDEEP
htmlcss
user3128376
user3128376

Reputation: 994

CSS Gradient Background Not Whole

I'm trying to set the whole background of my page gradient style, however, it looks like this instead https://i.sstatic.net/poG69.jpg

CSS: 

#gradient {

  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
}

HTML: 

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
    <!--        Reset CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/css_reset.css">
    <!--        Main CSS-->
    <link rel="stylesheet" href=".../public/stylesheets/main.css">
</head>
<body id="gradient">
<p>Hello World!</p>
</body>


</html>

I realized that if I add height: 880px; or some size of height it will look like http://imgur.com/AkUdK3e which is how I want it to look. But is there a way to do it without setting height? I tried

background-image: linear-gradient(to right bottom,#086A87, #00BFFF);

but it still look like the first link, unless I add height. And it's annoying to find the height of my page and I don't want to add any additional height as you can see I can scroll down in the 2nd picture. If adding height is the only way, what's a good way to define the height of my page so there's no additional scrolling to either up/down or left/right?

Thanks.

Upvotes: 2

Views: 88

Answers (4)

Gereltod
Gereltod

Reputation: 2234

update your css:

#gradient {
  background: #00BFFF;
  background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
  background: linear-gradient(to right bottom, #086A87, #00BFFF);
  border-radius: 2px;
  background-repeat: repeat;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Upvotes: 0

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

here is answer for you

http://codepen.io/vilaskumkar/pen/bNjzVb

html, body {
    height: 100%;
}
body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Upvotes: 3

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

CSS:

html {
    height: 100%;
}
body {
    margin: 0;
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    background-size:100% 100%;
    background-repeat: no-repeat;
}

HTML:

<body>
    <p>Hello World!</p>
</body>

Upvotes: 2

Persijn
Persijn

Reputation: 14990

If you don't want to fill the body you can sett the css property:

background-size: 100vw 100vh;

This forces the size of the background to 100% of the view port.

If you dont want the background to repeat (like if the page scrolls):

 background-repeat: no-repeat;

Upvotes: 2

Related Questions