How to Blur the Background of my Website


I am using the code editor know as Brackets to create my website. I have just got my website a background image that I like but in its original form, it is too bright for me to read the text on top. Hence I would like to blur the background. This would allow me to see the text on top as well as make the website appear better to me.

There are no error message involved - I need advise as to how to perform the task.

My .html File

<!DOCTYPE html>
    <title>Learn to Code</title>
    <meta charset="utf-8"/>
    <link href=',300,100,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">

      <h1 class="page-title">Learn to Code</h1>
      <p class="page-description">Are making your own website? Do you not know how to style your website correctly? Or are you just one of the many people who don't know how to connect multiple pages of .html and .css file together? Well you have come to the right place for help. Welcome to Learn to Code Academies. Here we teach people how to properly create complex website by making use of codes. Coding is just not like your average Sciecne or Maths lesson. Its more of a skill that if mastered can allow you to do things that may even change the world. So are you up for the challenge?</p>
        <li><a href="#"></a></li>
       <div class="contact-btn"><a href="About Us.htm">About us</a>
       <div class="contact-btn"><a>Contact Us</a>


My .css File note that both documents have been linked correctly

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
header {
  padding: 20px 0;

header .row,
footer .row {
  display: flex;
  align-items: center;
header nav {
  display: flex;
  justify-content: flex-end;

header p {
  padding: 0 20px;
  margin: 0;

body {
  font-family: 'Lato', sans-serif;
    background-image: url('');
  background-position: center top;
  background-size: cover;
  margin: 0;

.page-title {
  text-align: center;
  font-weight: 100;

.page-description {
  border: 1px solid #000;
  text-align: center;
  padding: 30px;


nav {
  background-color: #FFF;

nav li {
  margin: 0;
  padding: 0 10px;

nav li {
  display: inline;

nav ul {
  display: inline;

.contact-btn {
  float: right;
.contact-btn a { 
  position: relative;
.contact-btn a {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;


.contact-btn a:active {
  top: 2px;

nav a {
  height: 60px;
  line-height: 60px;
  color: #204156;
  text-decoration: none;


well a filter property exist:

you could also consider to just blur the image with like photoshop.


Check it out, should work:

Use separate div for each class.

-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);


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