-3

My background image for the div won't load in even though everything is correct

Take a look at my HTML and CSS!

HTML (image)

html

CSS (image)

css

body {
    margin: 0px;
    padding: 0px;
}

.wrapper {
    width: 100%;
    height: 100%;
    background-image: url('mountain.jpg');
}
<!DOCTYPE html>
<html>
    <head>
        <title>my first site</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link rel="stylesheet" href="custom.css">

    </head>
    <body>
      
       <div class="wrapper">

       </div>
  
    </body>
</html>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Nuh Ibrahim
  • 1
  • 1

2 Answers2

1

The image has to be in the same directory as your css file when you are using background-image: url('mountain.jpg');. Additionally the height property is relative to their parent elements when applied in percentage. Make sure your html and body elements are set to height: 100%; as well and it will work.

0x54696d
  • 44
  • 5
  • so i moved the jpg file to the same file that has my .css in it, but where do i set the height of the HTML and elements? do i set it in the head or the body? can u edit my code and show me? it would be really helpful if u could do that – Nuh Ibrahim Oct 16 '20 at 12:48
  • Add "html, body { height: 100%; }" to your css file. – 0x54696d Oct 16 '20 at 12:51
1

It won't work unless you put some content inside wrapper like headings and paragraphs etc.

or give the wrapper height in px not in %.So next time if you don't have content inside a div which has a background image always use px.

.wrapper {
    width: 100%;
    height: 800px;
    background-image: url('mountain.jpg');
}
Fahad Shinwari
  • 968
  • 7
  • 7