I downloaded "Date Picker" from http://jqueryui.com/datepicker/ and after I moved the CSS file into my project folder, the icons are gone.
WEB-INF/view/templates/images
WEB-INF/view/templates/datePickerCustomer1.css
In Css:
.ui-widget-content
{
border: 1px solid #8e846b;
background: #feeebd url(images/ui-bg_highlight-soft_100_feeebd_1x100.png) 50%
top repeat-x;
}
I have already tried
background-image: url(images/ui-bg_highlight-soft_100_feeebd_1x100.png) &
background-image: url('images/ui-bg_highlight-soft_100_feeebd_1x100.png') with quotes
None of those are not working.
The output image
The correct image to get
WEB-INF directory is a private area of the web application, any files under WEB-INF directory cannot be accessed directly from browser by specifying the URL like http://yousite.com/WEB-INF/images/myimage.jpeg. Web container will not serve the content of this directory.
Related
I would like to set a background image to a div using CSS.
While I can display the image while using HTML <img src="/static/img/fon1.jpg">...
I get a 404 (Not Found) when I try to set the image through CSS:
style="background-image: url(/static/img/fon1.jpg)"\
I have tried different paths like: ../img/fon1.jpg and many others. Also with and withoud quotes.
I am certain that the css and the html are linked correctly as I can set the background to a solid color.
If I use in html, the css elements find and display the picture as well.
I feel like I should resort to just using <img> and rescaling it to fit the window, but I'd like to know what's wrong with the sucker.
Any kind of help / materials / links / jokes are welcome. Thank you if you take your time. All the best!
Folder structure:
project
└─static
└─ img
| fon1.jpg
└─ stylesheet
| styles.css
└─ base.html
HTML
<link rel="stylesheet" type="text/css" href="/static/stylesheet/styles.css">
...
<body>
<div class="background1"></div>
<div class="background2" style="background-image: url('/static/img/fon1.jpg')"></div>
</body>
...
CSS
.background1 {
background-image: url(../img/fon1.jpg);
height: 960px;
width: 1280px;
}
.background2 {
background: red;
height: 960px;
width: 1280px;
}
You missed the quotes in your code.
.background1 {
background-image: url('../img/fon1.jpg');
height: 960px;
width: 1280px;
}
I believe the proble lies in JetBrains Webstorm application. I tried the same configur on another application where I was hosting the server, and then the images were found. Currently I was using Webstorms feature to open local HTML file in browser. Seems that it doesnt support GET requests from .css file.
Update:
When referencing static files in Webstorm Live Edit the path should include the project folder. In my case the img would be located at: http://localhost:63342/projectname/static/img/fon1.jpg
I don't know from which file you are trying to access the image. I am assuming, You are trying from base.html
you are able to add the image like this.
<img src="./img/fon1.jpg">
I need some help in understanding how I can get the following HTML coding to work.
<!DOCTYPE html>
<html>
<head>
<title>YAHUAS</title>
<style>
body {
background-image: url("Pictures/Yahuas.png");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
Student data
</body>
</html>
Should I be changing the following - background-image: url("Pictures/Yahuas.png"); so that it goes to the folder in the C:\Users\user\OneDrive - Bradford College\Advance Database\YAHUAS\PHP and HTML where this image is stored?
If the Pictures folder is located in the same path as your html file is, then it should work. Could you double check that the Pictures folder and your saved html file are in the same path?
I don't think you want to use the absolute path to the image unless you are going to view the html file only on your own computer. If you would put it on a web server or any other computer it is highly unlikely that the image would be found in the same path.
You should give to the exact URL Path
<style>
body {
background-image: url("./Pictures/Yahuas.png");
background-repeat: no-repeat;
background-size: cover;
}
</style>
Your Question is not really clear. However, I will assume you are trying to pick your image from the back of your folders/directories or from another Drive (e.g. C, D, F).
The Answer is Yes, You can Either use a backslash (Windows) or a forward-slash (Linux) with a full path or you can use a relative path if the image is present in the current directory or back directory.
<style>
body {
// Another Drive
background-image: url("C:/Users/user/My OneDrive/Pictures/pic.png");
// Relative Path
background-image: url("Pictures/pic.png");
// OR
background-image: url("./Pictures/pic.png");
// Back Directory/Folder
background-image: url("../Pictures/pic.png");
}
</style>
I am trying to load a local image as background image in CSS. My folder structure as below,
MyApp
Public
index.html
html
template.html
images
myimage.png
javascripts
stylesheet
Loading index.html from public folder and on click, loading template.html from html folder. In template.html i have defined the css like this,
textarea{
<!-- background-image: url(http://i.imgur.com/2cOaJ.png); -->
background-image: url('../images/myimage.png');
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:white;
background-color: white;
height:90%;
width:95%;
resize: none;
outline-width: 0;
}
And calling this in template.html as ,
<div id="bodydata" class="tabcontent" >
<textarea rows="5" ng-model="description"></textarea>
</div>
It works beautifully when I take an image from web "background-image: URL(http://i.imgur.com/2cOaJ.png);" but does not work when I change to the local image which is nothing but the same image downloaded and saved as the local copy.
background-image: url('../images/myimage.png');
I want to have it as local because the server may not have the internet connection. So how to refer the image in right way. I have tried many things like single quotes, double quotes, without quotes but it didn't work. Please suggest.
Thanks in advance.
How is your web-server setup? Where is your web-server running from?
Depending on these answers, you should be able to achieve the desired result by adjusting your CSS like this:
background-image: url('/images/myimage.png');
So for instance, if your web-server is running in /MyApp, and is configured to allow static files to be fetched (eg files matching this pattern /images/*.png), then the answer above should work.
So I am trying to call a background image through a seperate CSS file. The HTML file and CSS file are on the same level, but the background image is two levels lower.
Example:
index.html
stylesheet.css
resources>assets>background-image
Here is my html:
<div class="second-background">
<h2>Our</h2>
<div class="purpose-heading"><h2>Purpose</h2></div>
<p class="textstyle6">To provide unaccompanied runaway and homeless youth with a safe and nurturing environment where they can develop the needed skills to become active, healthy, successful members of our future world.</p>
<div id="rectangle"><p class="textstyle2">7,085 MEALS SERVED. 511 DROP-IN SERVICES.<br/>245 STREET OUTREACH HOURS. 64 SHELTERED YOUTH.</p></div>
</div>
Here is my CSS:
.second-background {
background-image:url("../resources/assets/purpose.png");
}
#rectangle {
width: 1110px;
height: 105px;
background-color: #ffffff;
}
The path is wrong, remove the ../ from the image path in css. If the structure is as you say it is.
Learn more about file paths here: https://www.w3schools.com/html/html_filepaths.asp and here: https://css-tricks.com/quick-reminder-about-file-paths/
The path rules break down like this: ../ means “go up one level” (that is, up to the folder
containing the styles folder); images/ means “go to the images folder”; and bg.gif
specifies that file.
According to the folder structure you provided :
The correct way is this :
.second-background {
background-image:url("resources/assets/purpose.png");
}
#rectangle {
width: 1110px;
height: 105px;
background-color: #ffffff;
}
Hope it helps
My image wont show up on my CPT.
I'm using this code in my css to display in my CPT on WordPress.
.list-single.single {
background: url('images/highlights man.png');
height: 40px;
width: 40px;
display: block;
}
This is the CPT code that i use in the cpt to show the image.
<li class="slide">
<div class="list-image single"><span class="list-single single"></span></div>
<h1 class="block-heading left mobile small"><?php echo $text; ?></h1>
</li>
this is the file name of the image.
Could someone tell me what is wrong?
That is because you've uploaded the image using WordPress, but you've referenced it using css from a static folder inside your theme.
Now, if this image isn't being used as an image inside your custom post type as a featured image, or an image in a post, but rather as a decorative part of the post type on the front end, you should place it inside your theme. Preferably inside an /images folder.
Say your theme folder structure looks like this:
index.php
style.css
\css
\js
\images
Higlights-man.png
then placing in your style.css
background: url('images/Higlights-man.png');
should point to the correct file.
Never upload images through WordPress, and use the direct path in your css for such things, as the uploaded images can easily be deleted by mistake, our you could change folder structure of your installation, and that path would no longer be valid.
Any static image that is used in a theme, should be inside an /images folder.
You have written wrong name of image.
It should be like this:
background: url('images/Higlights-man.png');
and if the image is in upload directory then you have to use fully path some thing like this:
background: url('http://example.com/wp-content/uploads/2017/01/Higlights-man.png');