I have a html file with a div like
<div id="mydiv" class="mydiv">...</div>
In that html, I have one css file (mycss.css) linked.
at 600th line of that css file, I have
#mydiv
{
float:left;
background-image: url(divimg1.png);
background-repeat: no-repeat;
width:44px;
height:43px;
}
at 700th line, in the same css file, I have
#mydiv
{
background-image: url(divimg2.svg);
}
Now, most of the time I am getting divimg2 but very rarely/intermittently I am getting divimg1. I was under impression that when browser reads css files, it read top to bottom and closest one that means divimg2 should appear all the time. What am I missing.
I understand there shouldn't be two occurrences of same class but here I am looking for why for the above case, behaviour is intermittent?
Use important tag in CSS to get first preference.
#mydiv
{
background-image: url(divimg2.svg) !important;
}
Related
I tried everything to make background image display with my local images. I know that I have the correct image location. because if I use content:url(); it works.
Background-image also works with a url image location from the internet. But it will not render with my local image. I have tried every possible location and it will not render.
This is the path to css:
<link rel="stylesheet" href="stylesheets/myCSS.css" type="text/css" media="screen">
my images folder is in the same path as my css folder.
The following is the HTML code:
<div class="col-md-2">
<p>start here</p>
</div>
and now the CSS:enter code here
.col-md-2 .angelhack {
height: 65px;
width: 188px;
display: block;
background-image: url(myPicture.jpg) no-repeat 0px 0px;
z-index: 1;
}
.col-md-2 .angelhack:hover {
background-image: url('http://4.bp.blogspot.com/-SWLJdR2_YzE/TWB-
EvvBWpI/AAAAAAAAA6U/MVtkwJXED88/s320/donkey.png');
}
Before anyone labels this a repeat question, I have searched all the answers to this question on StackOverFlow and have followed all the suggestions and I still cannot get the picture to render. I know the picture is in the correct location because with Chrome and content:url(); the image works. Any suggestions?
Your missing your "" quotes
background-image: url(myPicture.jpg);
With
background-image: url("myPicture.jpg");
try,
background: url("myPicture.jpg");
Also,
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
I have used background instead of background-image and it's working fine. and it assumes that pic is in the same folder as your html.
.col-md-2 .angelhack {
height: 65px;
width: 188px;
display: block;
background: url("myPicture.jpg") no-repeat 0px 0px;
z-index: 1;
}
EDIT: Overlooked that the file path for the url wasn't in double quotes.
Change:
background-image: url("myPicture.jpg") no-repeat 0px 0px;
To:
background-image: url("myPicture.jpg");
background-repeat: no-repeat;
Try this and see if it works.
.col-md-2 .angelhack {
background: url("../images/bg.jpg") no-repeat;
//Set your path in the double quote's
}
Your only problem was the way you wrote the background-image
Instead of writing it like this
background-image: url('mypicture.jpg') no-repeat 50px 50px; //the size isn't good there
Do it like this
background-image: url('mypicture.jpg') no-repeat;
background-size: 50px 50px;
It will appear like this
Im using a third-party grid in my web app wich defines a sortable icon as a png image. I would like to override it in my style.css file with a glyphicon without changin the third-party source, is it possible?
The third party code:
div.column-header-container {
background: url('column-sortable.png') no-repeat right;
}
And my style.css would be something like:
div.column-header-container {
background: GlyphIconHere no-repeat right;
}
I just can find examples using it directly on the html tag.
The property you're trying to override is called background-image. All you need is an equal or higher specificity selector in your CSS (equal if it loads last) and a valid property value. You can do it in stylesheet (.css file), in <style> tag or in style="" attribute.
.css file:
div.column-header-container {
background-image: url('http://lorepixel.com/g/400/100');
}
<style> tag
<style>
div.column-header-container {
background-image: url('http://lorepixel.com/g/400/100');
}
</style>
Inline style=""
<div style="background-image:url('http://lorepixel.com/g/400/100');"></div>
Specifically, for font-awesome, which seems to be the case, you want to do this:
go to cheatsheet this no longer works!
go to fa icon page and get the Unicode (example = "\f2da")
add this CSS:
div.column-header-container {
background-image: none;
}
div.column-header-container:before {
font-family: 'FontAwesome', fantasy;
content: '\f2da';
}
You will also need to specify font-size, probably position:relative or absolute, depending on use-case and perhaps position using top/left.
In some cases, adding fa class or fa-2x, fa-3x or fa-4x to parent helps, as it sets some of the properties you otherwise need to set yourself. However, don't count on it having the same size as other sister "natural" fa-* icons. You'll need to tame it..
I want to know in what cases from the following the css background images will and will not load. If you can explain also the "why" in a short answer, would be very helpful.
Also, if you aware of some differences between browsers in loading css background images in the following situations, please tell.
Situation 01
div { height: 300px; }
.classone {
background-image: url("imageone.jpg");
}
.classtwo {
background-image: url("imagetwo.jpg");
}
<div class="classone"></div>
Would the imagetwo.jpg be loaded in this case?
Situation 02
div { height: 300px; }
.classone {
background-image: url("imageone.jpg");
}
.classone {
background-image: none;
}
<div class="classone"></div>
Would the imageone.jpg be loaded in this case?
Note: the background-image: none come after the background-image: url("")
Generally in CSS, What comes last, takes place. So in solution 02, second definition of "classone" will replace the first one.
Edit
Browser downloads your entire css first, Then downloads necessary images while performing it. As your browser finds out you replaced background image, doesn't downlaod it.
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
So for example the picture below I'm having typing giving each class="container" it's separate background colour/picture.
<div id="p" class="container">
</div>
style sheet
p.container {
background-image: url(img/this_is_top.png) repeat;
}
CHANGING QUESTION for some reason I have having trouble in setting a background Image* for it.
Regarding your background image problem you currently have
background-image: url(img/this_is_top.png) repeat;
This is wrong. But you are thinking of the background shorthand CSS property which follows this syntax:
#p.container {background:#ffffff url('img/this_is_top.png') no-repeat center center;}
And if you are styling in your stylesheet and your folder hierarchy is the usual (/~/>/img etc) then it should be:
#p.container {
background-image: #ffffff url('../img/this_is_top.png') repeat center center;
}
Notice the double dots before the url to tell CSS to look up a level for the img folder
For starters, having multiple id's with the same name on the same page is not such a great idea. http://css-tricks.com/the-difference-between-id-and-class/