CODEWITHSUNDEEP
htmlcssimageurldirectory
Corinne Sylvanise
Corinne Sylvanise

Reputation: 1

background-image doesn't work with the pic in "img" folder only when online url

I'm facing a weird issue here. My full screen background image WORKS PERFECTLY WITH online images url BUT NOT WHEN it is located in the images folder (here named: img) and it has to be.

This site has an "img" folder with bkg.png image inside.

I've also put the image in the root folder just in case that would work with the following url(bkg.png); but it didn't work either. So finaly I've post the image on flickr and it is working. But I need to understand the issue and have it located in my img folder.

Thanks for your help.

Corinne.

 /*into folder : root/css/mob_pss.css */
      
      * {
       margin: 0;
       padding; 0;
       font-family: 'Lato', sans-serif;
       font-size: 14px;
      }   

      *::after, *::before {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
      }
      
      /*into folder : root/css/mob_bkg.css */
      
      html {
       /*I've tried those*/
        
       /*background-image: url(css/bkg.png);*/
       /*background-image: url(bkg.png);*/
        
       /*they didn't work*/
        
       /*but this works*/
       background-image: url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);
       background-position: center center;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
       background-clip: border-box;
       background-color: #464646;
      }

      @media only screen and (max-width: 767px) {
       html {
         
       /*I've tried the following*/
         
       /*background-image: url(css/bkg.png);*/
       /*background-image: url(bkg.png);*/
         
       /*they didn't work*/
         
       /*but this works*/
         
       background-image:vb url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);

       }
      }
      body {
       background-color: transparent;
      }
<!DOCTYPE html>
<html lang=""> <!--language here-->

<head>
   <!--DEVICE MATTERS-->
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FULL SCREEN BACKGROUND</title>
   <link href="css/mob_bkg.css" rel="stylesheet">
   <link href="css/mob_pss.css" rel="stylesheet">
   <style></style>
</head>
<body>
<!---->  
</body>
</html>

Upvotes: 0

Views: 1574

Answers (3)

Rahul
Rahul

Reputation: 4374

consider below is your structure

index.html 
css 
-- style.css 
img 
-- pic1.jpg

if you write your css in style.css file

so I would write below code in style.css 

body{
    background: url(../img/pic1.jpg);
}

url() in CSS is relative to the location of your css file

Upvotes: 2

Pragadeesh Mahendran
Pragadeesh Mahendran

Reputation: 7

Check whether the path for that images are all correct?

Upvotes: 0

Pragadeesh Mahendran
Pragadeesh Mahendran

Reputation: 7

try using single quotes,

   background-image: url('css/bkg.png');
   background-image: url('bkg.png');

Upvotes: -3

Related Questions