I'm having problem with duplicating body area, wchich looks like this:
How to fix it?
Asked
Active
Viewed 51 times
-4
-
Do you mean the fact that the gradient doesn't cover the whole body? Also provide some code, please. – Maharkus Oct 26 '17 at 11:50
-
where is your code? – Minal Chauhan Oct 26 '17 at 11:52
-
1try with `background-repeat: none;` – Jagadeesh Oct 26 '17 at 11:53
-
Possible duplicate of [this](https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats). Should set you on the right track. – Derek Nolan Oct 26 '17 at 11:58
-
tried that: now it's not fitting the screen - https://i.imgur.com/DKbwixf.png – Paweł Meller Oct 26 '17 at 12:05
-
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). **IMAGES of code are not acceptable.** – Paulie_D Oct 26 '17 at 14:19
2 Answers
1
You can change the background-size to fit the whole element by using background-size:cover .
body {
width:100%;
height: 600px;
background: linear-gradient(red, yellow);
background-size: cover;
}
Maharkus
- 2,841
- 21
- 35
-
Do i must define constant height - 600px? what with the smaller devices? – Paweł Meller Oct 26 '17 at 12:00
-
No, I just added the height for demonstration purposes. You can keep your height as-is. – Maharkus Oct 26 '17 at 12:00
0
this should fix it, the background will only show once
body {
background-repeat: no-repeat;
}
Bram
- 31
- 1
- 7
-
tried that: now it's not fitting the screen - https://i.imgur.com/DKbwixf.png – Paweł Meller Oct 26 '17 at 12:05
-
1the one from @Maharkus should work, you can change the height to 100% to set it to full screen – Bram Oct 26 '17 at 12:08