CODEWITHSUNDEEP
htmlcsssassgruntjs
newman
newman

Reputation: 421

Where to link background-images when using Sass and Grunt?

This is the first project that I am working on where the html and css files are located in separate directories, but this is also the first time that I am using grunt for task automation such as minifying and pre-processing my CSS.

My question is, when I am linking image files to be the background-images for my css...do I link the url() in reference to where the scss file lives, or where the processed css file is going to be. Or is it just wherever it is if I am in the root directory?

If you look at my css, I am trying to make a background image for my header and it is not finding the file. What am I missing?

Here is a screenshot of my directory in my text editor: https://i.sstatic.net/rrTNx.jpg

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
<h1>Text</h1>
</header>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>

Here's my CSS:

.hero {
  background-image: url("../img/house_front.jpg");
  background-repeat: no-repeat;
  background-size:100%;
  height:1500px;
}

Just for thoroughness, here's my Gruntfile:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
          src: 'js/app.js',
          dest: 'js/build/app.min.js'
      }
    },
    sass: {
    dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'CSS/build/main.css': 'CSS/main.scss'
        }
      }
    },
    watch: {
    scripts: {
        files: ['js/*.js'],
        tasks: ['uglify'],
        options: {
            spawn: false,
        },
      },
    css: {
      files: ['css/*.scss'],
      tasks: ['sass'],
      options: {
          spawn: false,
      }
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify','sass','watch']);

};

Upvotes: 0

Views: 252

Answers (1)

mayersdesign
mayersdesign

Reputation: 5310

You link it from "processed css file is going to be" for sure. Given your CSS looks like it is in a sub-folder "build" you need to alter your path (in the SASS, which will compile exactly the same, but to the CSS/build directory) to...

background-image: url("../../img/house_front.jpg");

Upvotes: 1

Related Questions