CSS background-image issue

Question

So here is a snippet of code

Html:
<Aside>
<div id = "navbar">
<nav>
<div>some</div>
<div>stuff</div>
<div>here</div>
</nav>
</div>
</aside>

trying to change background with an image i have on my laptop, the whole code is on my laptop which ia why i can not just link to it. Anyway
I try using CSS

#navbar{
background-image: url("/path/to/file.GIF")
}

And nothing, now being a man of science lol, my first thought was the path is messed up, so I tried just displaying the image using <img> in html and it showed up fine. Also tried changing the file type from GIF to jpeg just in case. Ive tried inverting the slashes from / to \, ive tried pathing relative to my css file by going up a directory using ../parent/resources/file.GIF and ive also used the full path from root but still nothing, also tried setting the picture as the background for body/aside/nav just to make sure.

Answer 1

:D

You could use 'background-size' to fit your image to the element size: aside of numeric values and differents units (among wich %, so you could set it to '100% 100%' but this doesn't keep original aspect ratio) there are some useful keywords among wich: 'contain' (entire image fit in element) and 'cover' (all element covered by cropped image)...

With 'contain', you may want to not have repetition (bacground-repeat:no-repeat;), and anyway, you may want to translate the image origin (default to image top-left corner stick to element top-left corner): 'background-position:<horizontal_value> <vertical_value>;' where <horizontal_value> and <vertical_value> could be either numerics value with any valid css unit or keywords, among wich: 'top', 'bottom', 'left', 'right', 'center' (for keywords only order doesn't matter, as it's implicit than first two are vertical values, and next two are horizontal ;)

Answer 2

Nevermind, im just dumb, turns out my background image had some transparency at the top and i didnt have enough content in the div element to start seeing it.