Css and image help please

Css and image help please
0

#1

I can’t get this css to work, it’s written on a style sheet saved in a css. folder, which is saved inside my main project folder on my desktop. the image is saved in the same project folder as the index page.

/id showcase*/
#showcase{min-height:40%;
align:center;
margin-top:20px;
min-height:400px;
background-image: url("…/img/elephant2.jpg");
background-repeat: no-repeat;}**

The image just doesn’t show up, as if the file path might be wrong but the stylesheet is talking to the rest of the page with no problem.


#2

Are you sure your image URL resolves to the elephant2.jpg file? You said that the image is saved in the same folder as the index page. If your CSS is in a subfolder, try using url("../elephant2.jpg").


#3

Hi thanks for the reply…
#showcase{min-height:100%;
align:center;
margin-top:0px;
margin-bottom:0px;
min-height:600px;
background:url("…/img/elephant2.jpg")no-repeat 0-350px;
}problem solved by putting it in a folder called…‘img’ LOL can see it now, I did try just making a link as you suggested, for some reason didn’t show.
The other thing is that no matter what I try I can’t find css to put into the style that will make the image truly responsive and shrink down without things going wrong, the only code I’ve found is
img {
width: 100%;
height: auto;
}
which does nothing…

One thing is puzzling, now I have the image looking nice in full screen, when reducing size of my browser


#4

You might also want to add display: block in the img properties if you want the image to scale up or down depending on the width of the container it’s in.


#5

Hi yep I already moved it to the css folder which is in the main folder now.
So the page reads everything.
I have saved the image in an image folder which is also in the main folder and it appears on the page fine.
many thanks again. Although I see what your probably thinking as when I copy and paste my code into this forum it looks like there are three dots before the “/img/elephant.jpg” but in my code there only two dots(" …/img/elephant2.jpg").


#6

Hi thanks for the reply, ok, the width is the full width of page, so it would be 100%. I will look it up,


#7

For some reason, the forum converts two periods into a single ellipsis character.

To post code, select the code part and hit Ctrl+Shift+c (or hit the </> button in the little toolbar above the post editor).

or enclose the code in backticks (the character to the left of the 1 key on a US keyboard) (a gif for reference)