Unable to set background-image using css

HTML & CSS
1

Hi there

This is my JSfiddle

I am trying to set background-image on a div but its not working
where is wrong?

Thanks

2

Hi again :smile:

Image is there, actually
But your div is too small, so it fits on the white background in the top-left corner of the image completely

3

Thanks @megazoid

good morning

4

Ok there is one more problem

I want to give Image a relative path from my drive

this is how I stored my files in my computer

when I try to give file URL
from css like this

/**Set the background-image on second tabs **/
#tab2{
background-image:url("/images/Desert.jpg");
height:500px;
width:500px;
}

then it shows an error on my console like this

786Ă—489 39.6 KB

How can I give relative path from my project directory

I am not using any backend lenguage like php or JSP or other
I am using JavaScript only

5

Relative path shouldn’t start with slash, only absolute paths do that.

If your css file is in “css” folder, what should it do to reach an image?

  1. Go one level up (from “css” folder to site root) - this is indicated as “…” in paths;
  2. Go into the “images” folder;
  3. Get the image;

So, if you combine these steps you’ll get a relative path: ../images/Desert.jpg

background-image:url("../images/Desert.jpg");
6

Thanks

Is there any way so that I can configure height and width of an Image according to window size available?

7

You can either use background-size property with % values:

backround-size: 100% 100%;

or use media queries to define different sizes (or even images) for each screen size:

@media (max-width: 600px) {
    .tab2 {
        /* if window width <= 600px 
        set different background size or image here */
    }
}
8

background is repeating

How to fix it?

9 
background-repeat: no-repeat;
1 Like
10

@megazoid

Thanks

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.