I'm using Spring MVC and the Thymeleaf view engine. I have an external style.css file with the CSS for my page. In the CSS file, I want to refer to a relative image URL.
This is my style.css file:
.background {
width: 100%;
background-image: url('/path/to/image/bg.png');
}
The above tries to access an image with the following URL, which doesn't exist:
http://localhost/path/to/image/bg.png
My real image is at:
http://localhost/myapp/path/to/image/bg.png
This StackOverflow question gives the answer to my question for inline CSS: How to set background url for css files in thymeleaf?
But how do I do this for an external .css file?
Put all your images folder structure with images path/to/image/bg.png inside the images folder under resources/static. Then refer to it in CSS as:
.background {
width: 100%;
background-image: url('../images/path/to/image/bg.png');
}
And then you can use this CSS in your templates as:
<head>
<link rel="stylesheet" media="screen" th:href="#{/css/application.css}"/>
</head>
Your files structure should look like this:
Related
I have deployed a Django 2.2 project via Digital Ocean and it can be found at www.fancyfetish.co.uk
If you visit the site it looks awful, with a lot of images and styling missing. This is not the case when in development. When I use chrome dev tools to inspect the console there are 404 errors when retrieving images that have been called from the CSS file, along with a lot of CSS styling.
Find here a code snippet from my CSS file that is not being rendered at all:
.showcase {
min-height: 40rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 15rem;
padding-bottom: 10rem;
background-image: url("/static/baseapp/img/fancy_fetish_showcase.png/");
background-position: center 50px;
background-repeat: no-repeat;
background-size: cover;
}
.showcase h3 {
font-family: 'Cinzel', serif;
}
.showcase h1 {
font-family: 'Cinzel', serif;
}
.showcase a {
font-family: 'Peddana', serif;
font-size: 1.5rem;
}
As shown in this section I clearly link the background-image back to the images folder. The particular images folder I am specifying is the one where all my static files go to when I use collectstatic.
The 404 error says:
http://fancyfetish.co.uk/static/baseapp/css/fancy_fetish_showcase.png
So it is trying to find the CSS image within the css file, however it is located in the img folder within static.
Here is the link in my django template:
<link rel="stylesheet" type="text/css" href="{% static 'baseapp/css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'baseapp/css/bootstrap.css' %}">
Here is the directory:
Within apps is a cart application, a user application, a products application and a baseapp where I keep all static folders, and link back to all of them from the other apps, so I don't have static files in every single app.
My settings files look like this:
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATICFILES_DIRS = [
'apps/baseapp/static'
]
STATIC_URL = '/static/'
The main static directory in the directory image above is where collectstatic moves everything to, it looks like this:
The media file found within the main directory is where images uploaded via the database go, as shown here in one of my models:
class ToyProduct(models.Model):
slug = models.SlugField(max_length=40)
image = models.ImageField(upload_to='media')
title = models.CharField(max_length=150)
description = models.TextField()
price = models.DecimalField(max_digits=5, decimal_places=2)
stock_quantity = models.PositiveIntegerField()
in_stock = models.BooleanField(default=True)
category = models.CharField(choices=TOY_CATEGORY_CHOICES, max_length=2, default='FW')
brand = models.CharField(choices=TOY_BRAND_CHOICES, max_length=2, default='NB')
on_sale = models.BooleanField(default=False)
def __str__(self):
return self.title
I write my css in an SCSS file and Koala dev tool compiles to css which is then collected to the static folder.
I am pretty sure this is something very obvious and I am looking too far into it, or I have my static files in my settings wrong. Is anyone able to assist at all?
Most grateful regards!
Carlie
url() in css files always uses a path relative to the location of the css file itself.
Your style.css file contains background-image: url("fancy_fetish_showcase.png"); so your browser is going to look for this file in the same folder as the css file (/static/baseapp/css).
You should replace this with url("../img/fancy_fetish_showcase.jpg") for it to look in /static/baseapp/img.
I discovered the issue, the server was accessing an old version of my css file through GIT. I recloned to repo and it updated to my latest working version of CSS and now all is working
I'm trying to display an image on the background of a site through CSS. I want the image to be kept in a separate folder than the CSS/HTML file. The image only displays, if I place it in the same folder as the CSS/HTML file, and reference its name only.
The code is in C:\Users\User\Desktop\project\templates and the image is in C:\Users\User\Desktop\project\pictures. If I try using the absolute path it won't display. It will only display if I place the picture in the templates folder.
<!--This code works if I place the picture in the template file-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("picture.png");
}
</style>
</head>
</html>
<!--This code doesn't work-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");
}
</style>
</head>
</html>
Use this css
Body{
background-image: url("../pictures/picture.png")
}
Based on your folder structure, you might need to do a ../pictures/picture.png
background-image: url("../pcitures/picture.png");
To find the image when it's in the pictures folder. The first '.' means the current directory(.css file), while the second '../' means the parent directory (projects folder). From there, you navigate to pictures folder and then directly link with the picture image. Use this link to learn about file paths. https://en.wikipedia.org/wiki/Path_(computing)
Avoid absolute file path. Imagine transferring your files to a new server, you'll have to rewrite the file path again.
background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");
I have a web page with the following folder structure:
MyWebpage
- css
- layout.css
- img
- wallpaper.jpg
- js
- index.html
I have the following line included in index.html
<link rel="stylesheet" type="text/css" href="css/layout.css">
Now, I want to use the image wallpaper.jpg as the background for the <body> element. How can I use relative referencing here? Should I locate the file relative to the CSS file, like this,
body {
background: url('../img/wallpaper.jpg');
}
or relative to the HTML file, like this?
body {
background: url('img/wallpaper.jpg');
}
It really depends on where you are writing your CSS.
If you are writing an inline style or using <head> <style> tags in the HTML file, then use a path relative to the HTML file (../ in this case), as you are telling browser to load the image from the HTML file.
And if you are writing the style in the CSS file, the style is relative to the CSS file destination (no ../ in this case), as you will load the CSS file from the HTML file and the CSS file will load all the required resources.
I am beginner in SAPUI5. I am building SAPUI5 application with HTML5 in Eclipse. In index.html page I am creating a html5 page, I have created css folder under WebContent. In index.html I added to refer css file. But properties in css are not affecting in html page. Do I need to add any other code to refer CSS file.
Css:
#CHARSET "ISO-8859-1";
body {
background-image: "image/splash-sunrise.jpg";
background-size: 100px 100px;
background-repeat:no-repeat;
}
To use CSS within the SAPUI5 environment you should link your controls to a specific CSS class. You can do it like this:
var myButton = new sap.m.Button();
myButton.addStyleClass("myButtonStyle");
And your CSS could look like this:
#CHARSET "ISO-8859-1";
.myButtonStyle {
color:#FFCCDD;
}
Make sure that you load the CSS file into your application, for example like this in your html file:
<link href="css/style.css" type="text/css" rel="stylesheet" />
Of course you can use this for your whole page as well. For your needs you could also take a look at the App control which provides some utilities for background images if you´re using mobile controls.
So what I have is two css's.
style.css
signup.css
I created a folder called css and placed signup.css in the css folder.
signup.css is a copy of style.css just placed in the CSS folder.
Here is the css code that contains the images:
#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
When I reloaded the webpage the images broke, so I changed the code to be:
#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
However the images still won't load. How do I adjust the css so the images load with the style.css placed under the css folder?
In response to a question:
head
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
title>
link href="css/signup.css" rel="stylesheet" type="text/css" />
/head>
Set a basehref tag in your HTML head:
<base href="http://example.org/image_base_path/" />
All requests without a protocol will get this URL prepended.
background:url(images/header_bg.gif) will get loaded as http://example.org/image_base_path/images/header_bg.gif
Try using
background:url(/images/header_bg.gif)
Assuming the path to your images folder relative to your domain is /images
I'm not sure I follow your changes exactly, however I'm assuming you started with something like this:
(HTML):
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
...
</head>
with files and directories:
index.html
style.css
images/
images/header_bg.gif
and it was working properly. Then if you added the following directory and file:
css/
css/signup.css
and changed the HTML head to read:
<link rel="stylesheet" type="text/css" href="css/signup.css" media="screen" />
and in css/signup.css you changed
background: url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
to:
background: url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
and all the files are world-readable (or readable by the web server user) then you things should work properly. Make sure that your css directory is world-executable and the css file is world-readable. You can verify whether your css file is readable by opening it directly in your browser, ie:
http://www.mysite.com/css/signup.css
If you get a 404 error, then the css file can't be read by the web server.
If you prefer you can also use an absolute path in your css file to point to the image, for example:
background: url(/images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
(assuming the images folder is located at the root folder on your website).