1

I know it's repetitious question but I have problem with my code. I have searched stackoverflow and w3schools for a background image setting and wrote the code that was on both sites exactly but still I have problem with the following code.

body {
  background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}

or

body{  background-image: url("Male-Fitness-Models-BAck.jpg");  }

above are the codes I used for setting background, but neither of them work.

HTML picture

mehrdad
  • 23
  • 1
  • 7
  • 4
    Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`). The dev tools provide an **Inspector** / **Elements** and a **Network** tab. Please confirm: Is the resource _found_ (e.g. HTTP 200 response)? If not, which _actual URL_ is requested? Make sure your background is on a _visible_ element with _non-zero height and width_. – Sebastian Simon May 16 '17 at 08:31
  • 1
    try just using : `background: url('/full/path/to/image.filetype')` – treyBake May 16 '17 at 08:33
  • Try to open the same image path into Chrome browser and check whether your getting the image or not... – Shiladitya May 16 '17 at 08:35
  • I'd also recommend calling the image something like male-fitness-models-back instead of the caps - UNIX-based systems are case sensitive and one mistake in the code where you type a cap (or vice versa) then it will 404 the file – treyBake May 16 '17 at 08:39
  • Very low quality question. You should try to share your project folder structure or show where your project is stored, as the image you are referring to is stored on `desktop folder`. But we don't know where your code is. – Deepak Yadav May 16 '17 at 08:42
  • I also wouldn;t use full system path - set up FollowSymLinks in vhosts and set up a proper folder structure, e.g. /images /css /js and then reference all through doing: /images/image-name.filetype – treyBake May 16 '17 at 08:46
  • Try adding padding to the body, maybe the imagen isn't showing becouse you have no content inside body. – Roy Bogado May 16 '17 at 08:55
  • @Xufox it matters, because this is the same reason, why it's not working on first place. If MehrDad has created the project folder in D: drive, then that path is not going to work. This is why we need to know the folder structure, so as to get a relative path – Deepak Yadav May 16 '17 at 08:56
  • @Xufox try doing the same example on your local machine. You'll get my point – Deepak Yadav May 16 '17 at 09:06
  • @ThisGuyHasTwoThumbs , I tried it before but didn't work – mehrdad May 16 '17 at 16:14
  • @DeepakYadav if you mean I should put the image and my project in the same folder and Drive so they are. – mehrdad May 16 '17 at 16:16
  • @mehrdad don't put images and files in same folder!!!! and what didn't work? My answer or my comment? – treyBake May 16 '17 at 16:17
  • @ThisGuyHasTwoThumbs ok I will put iamge another place. what u wrote in comment. didn't work – mehrdad May 16 '17 at 16:32

4 Answers4

2

If the background image file location is correct you might need to add a height and width to the container of the background image.

body {
  height: 500px;
  width: 500px;
  background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
Stephen Lane
  • 132
  • 8
2

There are a few things to investigate to ensure it always works:

1) Using the project absolute path:

ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.

e.g. <img src="/images/dog.png" />

2) Make sure the image exists

copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.

3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use &nbsp; inside the div:

CSS:

div {
    background: url('/images/dog.png');
    min-height: 50px;
    min-width:  50px;
}

HTML:

<div>&nbsp;</div>

4) Use a proper folder structure

by using a file tree that makes sense, it makes resources easier to manage. Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:

|--index.html
|----images/
|----css/
|----js/

that's a basic structure, then you can add more folders based on area e.g.

|--index.html
|----[area]/
|----images/
|----css/
|----js/
treyBake
  • 6,440
  • 6
  • 26
  • 57
1

body 
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg"); 
}
<body>
</body>

Add background size to make it visible

body 
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg"); 
}
Arun Kumar
  • 128
  • 7
  • my problem is not background size. because I can set an image from browser. I have problem with images are saved in my pc. – mehrdad May 16 '17 at 16:41
0

If you are using a PC saved image path make sure to replace the \ with / and it will work.

example:

background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
John Conde
  • 217,595
  • 99
  • 455
  • 496
Muhammad Afify
  • 1