Gulp을 활용한 SCSS를 통해 background-image: url()을 사용하려는데 이미지가 불러와지지 않습니다.
조회수 598회
Gulp을 활용해서 SCSS를 컴파일 한 후 section태그 부분에 들어갈 background image를 넣으려고 합니다. 이미지는 다운로드 받은 .jpg 파일이며 파일 이름은 "background.jpg"입니다.
제 html 파일은 다음과 같습니다.
경로: $ myproject/index.html
<section id="home">
<div class="home container">
<div>
<h1>Hello, My Name is Jessica</h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
제 SCSS 파일은 다음과 같습니다.
경로: $ myproject/scss/style.scss CSS 경로: $ myproject/css/style.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#home {
background-image: url('..img/background.jpeg');
background-size: cover;
background-position: top center;
position: relative;
&:after {
content:'';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
}
}
그리고 제 gulpfile.js는 다음과 같습니다.
경로: myproject/gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
function style() {
return gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./scss/**/*.scss', style);
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
CSS도 제대로 컴파일되어서 잘 나오는데 이상하게 background-image만 잘 나오지 않네요. 왜 그런걸까요? Gulp같은 경우에 이번에는 조금 바뀌어서 var가 아닌 function으로 전부 바꾸는게 좋다고 해서 바꿨습니다.
댓글 입력