image (zip) path

[cartimundi]

Hello...maybe more a css question...

 

but google won't accept my dropbox link or other extern links..everything has to be in the .zip folder.

 

 background:url(https://dl.dropboxusercontent.com/u/29995708/aanb1.jpg);

 

I must use a relative path according to my zip folder (the one i export form codepen...)

 

does anybody know how i can do that?

 

 

 

ps. i'm working on a mac...maybe there's a different..

[cartimundi]

maybe, my question is to basic...that everybody thinks...google that...

 

i did that...for the last 3 hours..

 

for now i have this link (from my desktop folder) copied in the browser and it worked

file:///Users/username/Downloads/burger-boy-finished-transforms-2/aanb2.jpg

 

but copied in the css, it won't work

 

#panel3 {

  position:absolute;

  top:0px;

 background:url(file:///Users/username/Downloads/burger-boy-finished-transforms-2/aanb2.jpg);

}

 

-----------------------------------------

before that it worked with the public folder on my dropbox

-----------------------------------------

 

#panel3 {

  position:absolute;

  top:0px;

 background:url(https://dl.dropboxusercontent.com/u/29995708/aanb1.jpg);

}

 

-----------------------------------------

Maybe the different between a url to dropbox..and local file...

or the ( ) or the ""

[Diaco]

Hi cartamundi 

 

We really have to keep our support focused on GSAP API .

 

but anyway , if i understood correctly , pls try this :

 background-image:url("https://dl.dropboxusercontent.com/u/29995708/aanb1.jpg");

[cartimundi]

Thanks Diaco ( you're right about the focus on GSAP API, i must find a good forum for basic html/css/ javascript)

 

the link you've post worked...which i already had...

 

but for google i have to make a folder with all the images in the zip folder...

 

so i'm looking for the code of a relative path to my folder on the desktop...

 

so i thought i change the "dropbox" link into file:/// " to the image in that folder" but that ain't working ;-(

 

----------------------

 

background:url(https://dl.dropboxus...708/aanb1.jpg);

 

changed to this..but sad enough, no succes 

 

background:url(file:///Users/username/Downloads/burger-boy-finished-transforms-2/aanb2.jpg);

----------------------

[Diaco]

hmm , if your images are in a folder for example named ' images ' ,  try this :

 

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

[cartimundi]

thanks...it works! although not with 

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

but with 

background-image:url(file:///Users/MacDrive/Desktop/burger-boy-finished-transforms/images/aanb1.jpg); );

 

i think i missed -image (behind background).. 

 

Codepen does a great job online..in the cloud...but when working with local files...

you first have to save it local...and then put in the images...

and then open index.html to see if everything works..

 

i'm gonna make a work out...that my images folder is the same as local..

 

 

Diaco thanks, you make my day!

 

and i'm gonna try to do some html/css/js lessons...

[OSUblake]

Your path is incorrect and will not work outside of your computer. Two dots is up a level which will allow you to access your images folder, assuming you have three folders js, css, and images right next to each other.

background: url(../images/aanb1.jpg);

[cartimundi]

okay thanks...i understand... ( like cd.. ( from the old times ms-dos )

 

i've got 1 folder..

 

banner folder contents:

-------

index.html

lincense.txt

readme.txt

CSS folder

IMAGES folder

JS folder

-------

[OSUblake]

Exactly. But those ms-dos days are making a comeback thanks to node based tools, so it wouldn't hurt to learn how to use the command line again.

[cartimundi]

Allright...it is on the bottoms of my brain..

 

Sad enough i struggle with html / css and javascript

 

when i see the codepens of other, i discover a lot...but not the basic things and ho to use it in a complete new codepen...

 

what should be the best advice for me...

 

learn html

learn css

learn javascript

learn more from codepen's....

 

a month a go...i couldn't make anything...and now a very simple animation like 

 

See the Pen waNJom by cartamundi (@cartamundi) on CodePen