Add image to background

Hi guys, i am very new to programming and things like this… Can’t understand where is the problem and where I do wrong. Could you check my code and tell me where I did mistakes?

body {
background-color: Orange;
border: 2x solid Gray;
border-radius: 16px;
font-family: Calibri;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
max-width: 730px;
padding-top: 8px;	
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}

html {
   background-image: url("foto\cs1.jpg");
   background-repeat: no-repeat;
 }  

the feeling is something wrong with url I add ;/ maybe I add bad url? :frowning: not sure… :sob::sob::sob:

I did too only with this code in my main css

body {background-image: url("foto\cs1.jpg");
   background-repeat: no-repeat;
 }  

nothing happened :frowning:

Hi riamis13 welcome to the forum

AFAIK, backslashes in paths is only a Windows OS filesystem path thing and everywhere else it should be a forward slash.

Also, I think Windows filesystem paths are case insensitive and everywhere else they are case sensitive.

For example, for a file at
C:\somefolder\somefile.jpg
Windows would “work” with
someFolder\someFile.jpg
but for everything else it would need to be
somefolder/somefile.jpg

Try changing the backslash to a forward slash.

Presuming cs1.jpg is the name of the image and it is located in a folder called foto:

html { 
  background: url(foto/cs1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
1 Like

Hi, Thank you.

Nope :frowning: Does not work

Should I use full C:\ destination in url or just last? I did in both ways :smiley:

donboe, yep, does not work for me :frowning: I assume I have problem adding url…

even if I do like this not working

body {
background-image: url(“C:\Users\afdf\Mano puslapis\pirmas blynas\foto/cs1.jpg”);
background-repeat: no-repeat;
}
or
body {
background-image: url(“C:\Users\afdf\Mano puslapis\pirmas blynas\foto\cs1.jpg”);
background-repeat: no-repeat;
}

Yes, for the most part web pages work with “http” not “C” (may be able to get around the security and permission issues to allow file:// but IMHO usually not worth the effort).

Don’t confuse filesystem paths with http paths.

Are you serving the page from a localhost server? What does the directory structure look like? eg.

/rootfolder 
  /css 
    style.css 
  /script 
    javascript.js 
  /foto 
    cs1.jpg 
  index.php 

* not that this is what it should be, only an example of what I would like to see to understand how you have things organized.

I have

/pirmas blynas
/css
mano pirmas sablonas.css
/foto
cs1.jpg

Folder and file names with spaces in them is asking for trouble. Easier going with “some-name” or “some_name”.

Anyway, what needs to be considered is the location of where something is called from and where it is. In this case the CSS file is inside the css folder and looking for a foto folder inside the css folder. But the foto folder is a sibling to the css folder, not a child folder.

Try

background-image: url(“../foto/cs1.jpg”);

the “two dots” means “go up a folder (ie. out of the css folder) and go into the foto folder”

3 Likes

That would have been my next question :slight_smile: If the CSS is/was inline or in a stylesheet

1 Like

Thank you :slight_smile: Got it!

Awesome! Happy happy :slight_smile: :star_struck: :hugs::heart_eyes::sunglasses:

1 Like

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