Question 222178 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Background Pic Not Showing

Following an HTML tutorial, running the code on VSCODE, but when I tried to run on google, the background picture that I specified in my style.css script does not show; I only see white. I have also just started using VsCode, so I could be doing something wrong with the run/debug process.

CSS code
HTML code

I tried adding and removing double-quotes, adding using different links, and running/debugging from VsCode.

Tags:

5

Answers


  2. 0

    check if the url of image right or not,
    i will share with you this code and it will work:

      height: 100vh;
  herewidth: 100%;
  background: linear-gradient rgba(0,0,0,.5) to rgba(3,3,3,.8);
  background-image: url(https://i.postimg.cc/MK9HQygq/pexels-negative-space-169573.jpg);
  background-size: cover;

    i hope this will help u.

    Login or Signup to reply.
  3. 0

    Your attached image does not show CSS
    are you using background image for header or body?

    as others mentioned you did not provided proper code, Just wanted to mention point assuming you have applied background image properly in CSS

    does your style.css has proper path which has this that file?

    1. if the div for which you have applied background image does not have height for width it will not appear in browser so mention some height and width or add content

    2. you can always use browser developer tools to inspect and check if the css you have written are properly applied or not and does that div/tag has content or width height

    3. image does not help us to check and guide you have uploaded image showing HTML but asking questions about CSS

    Login or Signup to reply.
  4. 0

    the problem here is simple. And it’s that you’re using the wrong syntax for the background-image property. Your url() is inside linear-gradient() .

    Change your background-image property to this, hopefully, you’ll get desired results.

    background-image: linear-gradient(rgba(4, 9, 30, .7), rgba(15, 72, 72, .7)), 
url("images/banner.jpeg");
    Login or Signup to reply.
  5. 0

    the background is a shortcut for the other properties like -image -size -repeated and so on, so you can combine the URL with the background like this:

    div{  background: url("https://i.postimg.cc/MK9HQygq/pexels-negative-space-169573.jpg"), linear-gradient( rgba(0,0,0,.5), rgba(3,3,3,.8)); 
   }

    also note you should add single or double quotes for the url()

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search