1

the answer is i had to put one more / in the path and dont know why,example background-image: url(/destinationfolder/imagename.jpg) not background-image: url(destinationfolder/imagename.jpg)

i wanna make a full screen background and the code is so simple however it didnt work can any body catch the problem ?

here is the HTML code 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

  <div class="bg">this is our div</div>

  <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

and thats the css code

body, html {
  height: 100%;
  margin: 0;
}

div {
  height: 100%;
}

.bg {   
  /* the proper height for the image */
  height: 100%;
  background-image: url('cover.jpg');  /* the use image location */
  background-repeat: no-repeat;   
  background-size: cover;
}
Sara Nabil
  • 60
  • 4
  • 2
    _it didnt work_ ....... what exactly didn't work? – Sfili_81 Jan 17 '20 at 16:24
  • 1
    As the comment above stated -- add a `width:100%;` to the image div CSS. *(The image needs to be in the same directory as specified in the CSS, as well)* – Martin Jan 17 '20 at 16:28
  • Did you double check the image path? – justDan Jan 17 '20 at 16:28
  • 1
    Try a browser inspection tool (Inspector for Firefox or Inspect for Chrome). This may show the cause of your problem. – JohnH Jan 17 '20 at 16:30
  • yes i checked the path of the image and image didnt show – Sara Nabil Jan 17 '20 at 16:31
  • What exact problem you are facing ? – midnightgamer Jan 17 '20 at 16:36
  • the image didnt load – Sara Nabil Jan 17 '20 at 16:40
  • 1
    @SaraNabil there are [lots](https://stackoverflow.com/questions/29535959/external-css-images-wont-load) and [lots](https://stackoverflow.com/questions/4296890/some-background-images-in-css-dont-load) of [other](https://stackoverflow.com/questions/17927825/css-background-image-wont-work) questions which are [exactly](https://stackoverflow.com/questions/21374534/css-background-image-not-loading) [the same](https://stackoverflow.com/questions/7752653/my-background-image-on-my-website-wont-load). Have you read and researched all or any of these? – Martin Jan 17 '20 at 16:45

2 Answers2

1

You almost certainly need background-size.

Keep in mind that a user with a 4K monitor is going to be rare compared to someone on a mobile phone. So be sure to use CSS Media Queries once you get to the last step of adding mobile support. You're the one looking at the screen to judge how you need to use background-size so be sure to tinker with the options in the developer tools; just resize the browser window down until the mobile effect takes effect. You can also use units such as percentages (background-size: 100% 100%;). Good luck!

.bg
{
 background-image: url(images/bg-desktop.png);
 background-size: contain;
}

@media (max-width: 1024px)
{
 .bg
 {
  background-image: url(images/bg-mobile.png);
  background-size: cover;
 }
}
John
  • 1
  • 13
  • 98
  • 177
0

Try with setting min-height of body or div element to 100vh body{min-height:100vh;}

Possible problem: The image should be in same directory as your css file since u are using relative path.

Mirza C
  • 36
  • 5
  • try what you said it didnot work, knowing that when i put the same code in internal style it worked – Sara Nabil Jan 17 '20 at 16:51
  • Are you sure that you properly linked css file ? This means you have your index.html file in some folder, and u added css subfolder with style.css file in it. – Mirza C Jan 17 '20 at 17:02
  • all is right ,and when i add a background color it works and i tried different images but dont all work – Sara Nabil Jan 17 '20 at 20:11
  • You can try with images from internet. Find image, right click on it and chose "open image in new tab", then copy url and paste it into background-image:url("yoururl") – Mirza C Jan 18 '20 at 17:13
  • And you can also try with setting double quotation marks insted of single – Mirza C Jan 18 '20 at 17:15