Question 300297 in CSS Question posted in
Some basic documentation can be found here.

Css – online, background image not being shown on full page

online linked image to full body, not being shown on webpage. Although, the local image are being shown.

inspected developers tools, there was no error except,

Cross-Origin Read Blocking (CORB) blocked a cross-origin response,
"black-horse-running-on-green-field-surrounded-with-trees-101667/"

Image is not being loaded, screen is white. Expecting solution?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  background-image: url('https://www.pexels.com/photo/black-horse-running-on-green-field-surrounded-with-trees-101667/');
  color: #fff;
  height: 100vh;
}
<body>
  <header>
    <h1>Welcome to Our Website</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut dicta consequatur quidem incidunt officia tempora.</p>
    <a href="#" class="btn">Find Out More</a>
  </header>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Lovely, It Works! Thanks for the solution [Jlair].


  2. 0

    You are using the wrong link.
    You’re using the link that goes to the web page. You need the link with only the image.

    To get this link, right-click on the image and copy the image link.

    Here’s what you can put in your code:

     header {
     background-image:url('https://images.pexels.com/photos/101667/pexels-photo-101667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
          color:#fff;
          height:100vh;
          background-size: cover;
          background-position: center;
     }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search