My css file is in: media folder.
my images are in: media/msg folder.
This is the setting of the css file:
.info {
color: #00529B;
border-color: #789FCC;
background-color: #CDEAF7;
background-image: url('/msg/info.png');
}
.success {
color: #264409;
border-color: #C6D880;
background-color: #E6EFC2;
background-image:url('/msg/success.png');
}
.warning {
color: #514721;
border-color: #FFD324;
background-color: #FFF6BF;
background-image: url('/msg/warning.png');
}
.error {
color: #8A1F11;
border-color: #FBC2C4;
background-color: #FBE3E4;
background-image: url('/msg/error.png');
The images are not loading.
When I do "inspect element" from browser it tells me "could not load the image".
as far as I know it should take the relative path of my css file and add the path to the image... but it doesn't work.
What do I do?
The problem is because you are starting your paths with /...
'/msg/error.png' => base_url/msg/error.png
'msg/error.png' => css_url/msg/error.png
So just removing the / will work.
Your CSS will be evaluated based on the file that imports it.
To avoid any issues, always give paths to images and other files based on the document root:
/media/msg/warning.png
Related
When trying to display in CSS the SASS variable that I declared, I don't get the variable itself in the CSS output file, but the value given to the variable.
To be more clear, this is what I get:
SCSS/SASS input
$gray__background: #2d2d2d;
:root {
--gray__background: #{$gray__background};
}
body{
background-color: $gray__background;
}
CSS "output"
:root {
--gray__background: #2d2d2d;
}
body{
background-color: #2d2d2d;
}
That's what I was expecting to get:
CSS "output"
:root {
--gray__background: #2d2d2d;
}
body{
background-color: var(--gray__background);
}
Short story: I want to know if the result in the CSS "auto generated" file background-color: var(--gray__background);, instead of background-color: #2d2d2d; is possible to achieve.
I use the Live Sass Compiler extension for VSCode.
Sorry if my question is a little bit vague. I'm new to coding.
The :root variables are being declared in the SCSS, but are not being used, so they wouldn't show up on the CSS output.
It looks like you'll have to use --gray__background in the SCSS rather than $gray__background so it becomes: background-color: var(--gray__background);
.
Hope this helps.
I'm using snackbar in my Angular 9 project but some reason I'm getting the same background and text color for action button. I added css style in the component.scss file and also global style.scss file but still not working.
this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!',
{ duration: 5000, panelClass: "blue-snackbar"}).onAction().subscribe(() => {})
I also tried like this
panelClass: ['my-snack-bar', 'button-bar']}
I also add this in styles.scss and component.scss file but still not working
.my-snack-bar {
background-color: #E8EAF6;
color: red;
}
.button-bar {
background-color: pink;
color: blue;
}
example
Not sure why it's happening..any suggestion or help will be really appreciated.
In your global styles file, usually styles.scss you need to target the panelClass property, something like this:
.my-snack-bar {
background: #2196F3;
button {background:white; color: blue}
}
Here's a working example https://stackblitz.com/edit/angular-stacb4-b1fuu5
I run my html on localhost
this is what i got when i put my css file on css folder
href="css/well.css"
well.css in css folder
and this is what i got when i put well.css on the same directory as index.php
href="well.css"
well.css on the same directory as index.php
this is well.css and im using bootstrap for this site
#well{
color:white;
}
#topping{
background-color: black;
color:white;
}
.active{
background-color: white;
}
#rite{
background-image:url("../1.jpg");
opacity: 0.9;
background-repeat: fixed;
}
#submit{
width:100px;
margin-left:90%;
background-color:white;
}
#sing{
background-color: white;
color:#323280;
}
.panel-default > .panel-heading{
background-color: #bd1919;
color:white;
}
.panel-default > .panel-footer {
background-color: black;
color:white;
}
my question is directory of the css file can change the appearance of the site?
why the panel heading has a different color even though it has the same css?
My question is, can directory of the css file can change the
appearance of the site?
Yes it can.
For example, when you use a relative path, as in background-image:url("../1.jpg");, the browser will look for the image in a folder one level above then folder of the CSS file.
So if your folder structure looks like this
root/www/css/well.css
root/www/1.jpg
and you move the CSS like this
root/www/well.css
root/www/1.jpg
the browser will not find the image as it is no longer one level above the CSS folder
I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?
No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.
Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.
First while I was styling the css I realized I didn't create a folder for it, so I decided to create a folder for css. Which I named screen.css but right after creating the css folder my images stopped showing. I have check the spelling and the tag but nothing seems to help. I did change link tag from screen.css to css/screen.css
Everything was working fine until I created a folder for the css so I'm guessing the problem might lay there.
An example of the html
body
{
background: url(images/wallpaper.png);
background-repeat: repeat-y;
margin: 0;
background-color: #e4c17f;
font-family: 'Nova Square',helvetica, sans-serif;
}
#banner
{
width: 900px;
background-color: #a65900;
margin: 0 auto;
height: 150px;
background: url(images/banner.jpg);
}
#footer
{
width: auto;
background-color: #a65900;
height: auto;
background: url(images/name.jpg);
}
You created the folder CSS therefore probably need to reference the images from your CSS relatively to the images folder...
A relative path is the path to a file from the current directory.
-- images
---- wallpaper.png
-- css
---- screen.css
body {
background: #e4c17f url(../images/wallpaper.png) repeat-y;
}
Try this :
The Browser will start looking for the image from the folder where you have kept your css
background: url(../images/wallpaper.png);
It worked! :D
I changed the tag to:
background: #e4c17f url(../images/wallpaper.png);