I'm using express + node.js + Jade. I wrote up a jade file but I can't get the background image to appear. I played around with the body class and it seems to work for the text color but it doesn't use the background image
body {
font-family: "Josefin Slab" !important;
background-image: url("concursum-bg.jpg");
background-size: cover;
color: white;
text-align: center;
background-repeat: no-repeat;
}
I made sure that the image is in the same folder as this jade file.
When I do view page source the html is:
body {
font-family: "Josefin Slab" !important;
background-image: url("concursum-bg.jpg");
background-size: cover;
color: white;
text-align: center;
background-repeat: no-repeat;
}
I'm running this on localhost if that matters.
The image file must be served so that it is accessible to the browser. When it's in the folder with the jade file (I'm assuming this is a views directory), it's not served by Express and so the browser can't get to it. To fix this, make the server serve the image file:
In the main Express app, use express.static to serve static files from a directory:
app.use(express.static(__dirname + "/public"));
Now, create the directory for the files to be served from:
mkdir public
Create an image directory there, for sanity:
mkdir public/images
Move the file there
mv {views,public/images}/concursum-bg.jpg
Update your stylesheet, changing url("concursum-bg.jpg"); to url("/images/concursum-bg.jpg");.
Restart your Express app.
http://expressjs.com/starter/static-files.html
Related
I'm taking a course on Udemy and I've followed what it shows in the lesson and even asked in discord but haven't received a solution.
The background image I used from the web using a image URL works, but when I try to link an image saved on the same folder as the CSS and HTML files nothing happens. All I get is a blank white background instead of an image. I'll be adding screenshots.
https://imgur.com/gallery/C4468Kb
body {
background-image: url(starwars.jpg);
background-size: auto;
}
h2 {
color: red;
text-align: center;
border: 5px solid purple;
cursor: crosshair;
}
p {
color: pink;
}
p {
color: green;
}
li {
list-style: none;
display: inline-block;
}
Try background-image: url('starwars.jpg');
Check the file path for the image and make sure it reflects what is being written in your url() css. Right now you are showing that image is located in the root directory of your project. If the image is not in the root directory, say for example it's in a folder called "images" in your root, then the url should read url('images/starwars.jpg').
It would be good practice to put any image you want to use in your site in a folder named "images" inside your root directory anyway. Try that, and see if it works.
So just to clarify: create a new folder inside the root folder of your project. It should be on the same hierarchical level as your index.html file. Take the image, where ever it is, and place it inside that new images folder. Change your css to say
background-image: url('images/starwars.jpg');
I have an image called item8 that is being rendered on my webpage the css looks like this. This is in a css.sass file
.body-detail-intro {
background: url(/assets/item8-45411322696feaa47a0345b3e4bdd5de1b2cff8243c534b84a83a8d4d732ec0d.png) no-repeat;
background-size: cover;
background-position: center;
height: 55vh;
position: center;
color: white;
}
I am not sure where there hash on the image path came from as the image is just named item-8. When I remove the hash and just use item-8 the picture still loads.
Now enter this image Suitsandtables_HowitWorks.png
the code below doesn't work with Suitsandtables_HowitWorks.png I also tried it with another image I have already on my site called team-1 which still didn't work
.middle .right{
background: image-url("/assets/team-1.jpg") no-repeat;
background-size: cover;
background-position: center;
height: 600px;
width: 300px;
}
Ive tried background, background-image, url, image-url nothing is working. Might be a css issue which I am currently checking as in wrong classes called for the css to hook to but I don't think so.
I am using css.sass
That hash come from rake assets:precompile, which is run by default in production so your server or the CDN you're using are able to cache it.
Sprockets will handle that hash for you under the covers.
My file extension is only .scss, but that shouldn't matter.
.your-class {
// Note i'm using only the image name. No path
background-image: image-url('my_image.jpg');
}
I just extracted this example from a working project, so it should work just fine.
I'm using node js (without express) and I have problem with background image url
.jade file
extends ../node_modules/pug-bootstrap/_bootstrap
block body
style
include style.css
style.css file:
body{
background: #222 url('skyscrapers.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
align-items: center;
}
it seems like the background color works but the img not loaded.
I check it in simple HTML file and everything work fine.
The location of the img are correct to.
The image will be loaded relative to the resulting HTML file. Make sure that the skyscrapers.jpg file is in the same folder as the HTML output you are generating.
I have a landing page with a background image that is showing on locally, but when I push it out live I am unable to see it on the internet.
My file structure is very simple, I have a root folder called runn, and in that folder I have a css folder, an image folder, and etc.
Below is the css for my background image.
body {
color: white;
background: #ee6184;
background-image: url('../images/image_01.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 180%;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
Look at the browser console (or network), maybe it shows you 404 error for this image. That means your path does not work for the server, and also it can be 403 (forbidden) or other errors.
Also, you can set path as /images/image_01.jpg if the root is not in subfolder like this: domain.com/runn/.
In other ways please put the link, so I can understand the issue.
usually when debuging an image isn't showing as expected, go chrome console see if there is 404 saying resource can't be found.
background-image: url('../images/image_01.jpg');
that means there is no such file exist in the path u've written in your html.
then re-configure the image path or upload the resouces to the correct path.
u can either use relative path in css as you've done in this case
background-image: url('../images/image_01.jpg');
or you can use absolute path in a sever language file such as in php
background-image: url('<?php echo site_url();?>/images/image_01.jpg');
i have this inside my site.css file (in the COntent directory)
body { width: 100%; background: #e7e6de url("/content/images/back-page1.png") repeat-x; font: normal 13px arial, sans-serif; text-align: center; color: #4c4c4c; }
it works fine when i test it locally but it doesn't work when i upload the site to the hosting provider.
the issue is around the url of the background image. i assume its some path issue.
any suggestions?
You need to make the URL relative to the css file.
If your css file is located under content/style
Then your url should be ../image/back-page1.png