I've index.html file and img folder residing in the same directory,
I want to have the background image in div with .img1.
so I'm doing something like this :
Index.html
.img1 {
background-image: url("img/bg-header.jpg");
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
<div class="img1">
<div class="ptext">
<div class="dark-overlay">
<div class="home-inner text-center">
<h2 class="display-4 text-center">PULSES</h2>
<br>
<p> HALUTZIM 26 TEL AVIV<br><br>+4410600</p>
<br>
<br>
<div class="arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
</div>
this should set the background image of the div, but it is not working ?
Note:
As I mentioned index.html style.css and img folder are residing in the same directory, I've images inside img folder.
Am I doing something wrong ?
Please help thank You
Try to render the image as an in-line image in your page using tag just to confirm that the path is ok. If the path is ok, check the div's width and height then play around with background-postion property.
If still not working, post your html head.
I would try background-image: url("../img/bg-header.jpg");
Complementing my answer with Wayne's good explanation in the comments below:
"the relative path from a CSS file is based on its location. Thus the same CSS file can be used for HTML files in different locations. The css file is not in the same directory as the html. Hence ../ or /img/bg-header.jpg if the /img/ is off the root www directory."
Related
I am trying to call an image from a folder using css.
I have tested the css with background color, so i know it is linked and working properly.
what I've tried:
I have tried to call an image from outside the image folder.
I have tried to change the image type to png.
And i have tried a different image.
html
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
css
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
Your code works (see fiddle) so I'm assuming you just have the image path wrong.
So when you say...
#hero{
background-image: url(img/Computer_repair(1).jpg);
}
...that means where ever your css file is saved, there also needs to be a folder called img and inside that folder is where you need to put Computer_repair(1).jpg
Your code looks fine. I suspect there's a problem with the image path. Try this:
background-image: url('/img/Computer_repair(1).jpg');
The problem was it was not working with the (1).
I Needed to change from Computer_repair(1).jpg to Computer_repair_1.jpg
HTML
<section id="hero">
<div class="hero container">
<h1>testing</h1>
</div>
</section>
Css
#hero{
background-image: url(img/Computer_repair_1.jpg);
}
<div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div><div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div> <!-- This is the home.component.heml -->
.class1{
background-image: url(/Users/md.nuhelnawazchowdhury/Desktop/Shoppie/andalib/src/assets/img/Shoppie1.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I can't get the home page to show the background image. The files above are app.component files.
First start by putting your images inside assets folder.
Assets folder is automatically created by Angular CLI, when you create a new project.
Now it depends on where you wanna use the background image.
If you are in app folder you can do somthing like this:
background-image: url(../assets/Shoppie1.jpeg);
if you are deeper, say you created a component in its own folder, you will have to do something like:
background-image: url(../../assets/Shoppie1.jpeg);
I created this github demo if you wanna see how it is done: link
Yout path should be /assets/img/Shoppie1.jpeg
background-image: url("/assets/img/Shoppie1.jpeg")
Open Developer tools > Network tab and check if the image is getting downloaded while the app is loaded.
Try using a url in single quotation for a url as shown below!
<div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div><div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div> <!-- This is the home.component.html -->
.class1{
background-image: url('/Users/md.nuhelnawazchowdhury/Desktop/Shoppie/andalib/src/assets/img/Shoppie1.jpeg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But for the best practice of developing an angular app I would recommend to create a separate folder for images inside an asset folder that would be the best way to track and make an application clean.
I want to paste a relative image url to a div to set it as the background image. Unfortunately the div won't render the image. So this works fine and renders the image
<img src="../assets/images/HeroImg.jpg">
but this one doesn't
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Things I also tried:
wrapping the url inside single quotes
assets/images/HeroImg.jpg maybe?
./assets/images/HeroImg.jpg starting from the src folder
images/HeroImg.jpg and ./images/HeroImg.jpg starting from the assets folder
What is the correct url to use for background images?
Update
I'm using VueJs so things might be different here? Steps to reproduce:
Create a new project using the Vue CLI
Create a images directory in src/assets
Create an image in src/assets/images and call it HeroImg
Update App.vue file with
.
<template>
<div id="app">
<div>
This works:
</div>
<div>
<img src="./assets/images/HeroImg.jpg">
</div>
<div>
This doesn't work:
</div>
<div style="background-image: url('./assets/images/HeroImg.jpg')">
Content without background image
</div>
</div>
</template>
You will see that the img tag renders the image but not the div with the background image.
Terry's answer did the trick but I needed an extra set of parentheses around the url tag content:
computed: {
heroImage() {
return {
backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
};
}
}
When you're using relative paths, Webpack is unable to resolve them properly if they are found inside your inline style attributes. Webpack, can, however, resolve the image path properly if it is use as an <img> element source in the template directly. Therefore, the solution to use a resolved image path as a CSS attribute is to simply reference it as a computed property.
In your template, you can use v-bind:style="heroImage" to reference a computed property:
<template>
<div id="app">
<div v-bind:style="heroImage">
Content without background image
</div>
</div>
</template>
Then, in your VueJS component itself, you can do:
computed: {
heroImage() {
return {
backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
};
}
}
html
<div class="yourDivClass">
Content goes here
</div>
css
.yourDivClass {
background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover
}
You should wrap them with quotes.
From MDN, we need to wrap the path or url of the image into a
background-image: url("../../media/examples/lizard.png");
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
Suggestion:
Better to avoid the inline styles. you can include the style in an external sheet.
I think you have not specified height and width property.
div {
width: 60px;
height: 60px;
border: 1px solid black;
}
<div style="background-image: url(https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/04/Blog_coding-game.jpg.webp)"></div>
Try in css file like this
background-image: url('~src/assets/home-page-img/header-bg.jpg');
My background-image won't show up. Do I need to tag the image in the HTML? Maybe position reference or something? Please help!
<html>
<head>
<link type="text/css" rel="stylesheet" href="sespe.css"/>
<title>Sespe Pizza Co.</title>
</head>
<body>
<div id="header1">
<h1>Sespe Pizza Co.</h1>
</div>
<div id="mb1"></div>
<div id="mb2"></div>
<div id="mb3"></div>
<div id="mainPage">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
CSS.....
body {
background-image: url('/Users/Username/Downloads/3634195609_f6b7edac1b_b.jpg');
}
Your path is the problem. You are navigating to your downloads folder. Place your image in a folder in your site folder, call it say 'images' and then call it into your css like this. If your new 'images' folder is on the same level as your css folder, the first option would work. ../because you are going up one folder to get to images.
body {
background-image: url('../images/3634195609_f6b7edac1b_b.jpg');
}
Edit: Seems in your case, your css file is not in a css folder, so you can just get to your images folder without going to a different level:
body {
background-image: url('images/3634195609_f6b7edac1b_b.jpg');
}
I have this div which is loading perfectly image url from the internet but not my local image, very weird:
<div class="col biggest-grid dir-medico-grid" ng-click="showDirMedico()">
<img src="../img/dirmedico.png" class="img"/>
<p>DIRECTORIO MÉDICO</p>
</div>
So when I try this it works with no problem:
.dir-medico-grid{
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/confectionary.png);
}
but if I try this:
.dir-medico-grid{
background: url(../www/img/doctors.jpg);
}
Now it doesn't work as you can se my path is correct i'm going from ionic.app.scss to doctors.jpg:
I have tried with background: url(../www/img/doctors.jpg) no-repeat center center fixed;, with '../www/img/doctors.jpg' and "../www/img/doctors.jpg" with background-imageinstead of background but nothing seems to work this is very weird.
Use only img/dirmedico.png in html
<img src="img/dirmedico.png" class="img"/>
And for css
.dir-medico-grid{
background: url("../img/doctors.jpg");
}
The thing is for html, all templates are rendered on index.html which is in same directory with img.