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
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 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.
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');
I know that this question has been asked and answered many times. I have viewed and tested the answers to all of those questions, but still I cant get it working.
I have a div in my HTML Document. I styled it to have a specific height and width. When I give it a background color, I can clearly see it. But If I use background image property, no image is shown.
Here is the HTML :
<body>
<div id="div">
<div id="playButt"></div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="Js/Init.js"></script>
<script src="Js/Menu.js"></script>
</body>
And the Css :
#playButt {
position: absolute;
width: 100px;
height: 100px;
display: block;
background-image: url("Imgs/User Interface Icons/PLAY icon normal.png");
}
My document structure is like this :
HTML5\Project FG\Imgs\User Interface Icons\PLAY icon normal.png
The css file is properly linked with the HTML file and resides at the same level of the HTML file inside the folder Project FG.
What is it that I am doing wrong ? How can I correct it ?
Thanks.
Make sure you file name has not white spaces so convert PLAY icon normal.png to something like PLAY_icon_normal.png.
Also make sure that your HTML is pointing to the right file.
You can use the following list as reference when creating your URL:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
UPDATE: This has been solved. My CSS selector was wrong. Thank you so much for all who responded!
I am just starting out building a site on a local server using MAMP. I have worked on other people's code but am a sort-of novice when it comes to starting from scratch so forgive my naivety. My CSS file wont apply and give me the proper background color for my header. I have two stylesheets, style.css and 960.css (downloaded from 960.gs).
Upon going to index.html, 960.css renders on the page but style.css is nowhere to be found. They are in the same folder, and called exactly the same on index.html. Please help.
My file structure:
-project
-styles
style.css
960.css
index.html
The code is as follows:
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/style.css"/>
<link rel="stylesheet" type="text/css" href="/styles/960.css"/>
<title>title</title>
</head>
<body>
<div id="header_container" class="container_12">
<div class="grid_2">
<h1>Title</h1>
</div>
</div>
</body>
</html>
and style.css
#header_container .container_12 {
background-color: #000000;
}
If you are not familiar with the 960 grid system, all it does is provide div classes and measurements for them. The container_12 you are seeing is in 960.css but is only set with dimensions, not background color so I dont believe it is necessary to include 960.css as it is pretty long. It may be an issue with MAMP, but I'm sure this is a simple mistake somewhere in the code, but I've been working on this issue so long im just braindead at this point. Thank you so much for any input/suggestions you have. If I have not made myself clear anywhere or I need to explain something in more detail please let me know! Thanks again.
This CSS selector you have written is wrong.
#header_container .container_12 {
background-color: #000000;
}
Use
#header_container {
background-color: #000000;
}
or
.container_12 {
background-color: #000000;
}
Hope the class .container_12 belongs to "960.css" and you are trying to force the class in your style.css, if yes, try to update your css (!important) like below..
CSS:
.container_12 {
background-color: #000000!important;
}
you selector wasn't wrong, you were only violating group selector's rule and a couple of things. However to use group selectors, you need to separate each selector with a "," not space. so you should have something like this;
#header_container, .container_12 {
background-color: #000000;
}
But I wonder why you are passing the same property and value to the same div element with a class and an id?
Good luck.