I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
Related
I've tried everything and searched everywhere. But nothing seems to work.
It's such an easy problem to solve I think, I'm just not getting there alone.
I want to set a background image on my jumbotron, since I'm using bootstrap.
Here is what I did.
<div class="jumbotron center " > <!-- start jumbotron -->
<div class="container">
<div class="jb-text">
<h1>This is an epic service</h1>
<h3>Not really, just trying this thing out</h3>
</div>
<button class="btn btn-default" id="btn-custom">Start Your <strong>Free</strong> Trial</button>
</div> <!-- end container -->
</div> <!-- end jumbotron -->
And this is the CSS
.jumbotron{
background-image: url('image/green-forest.jpg') no-repeat center center;
}
Unfortunately nothing happens.
The problem is that you have used background-image instead of background property.
I was just having the same problem. Since my css file was contained within a stylesheets folder, and I stored images in a different folder, I had to change it to:
.jumbotron{
background-image: url('../image/green-forest.jpg') no-repeat center center;
}
This is because your url is relative to the location of your css file, not your HTML file.
It's likely a combination of two things:
First, you have specified the background-image attribute. This would be fine if you hadn't added the other properties as well. So you should have rather used the background attribute here - as in the previous answer.
Next, whether or not your jumbotron style actually applies also depends on the other in which you load the CSS files in your page. If you load your CSS file before the Bootstrap CSS, then the styles from the Bootstrap CSS file will probably override your style. In this case, your styles will not apply. So you should load you specific CSS file after the Bootstrap CSS file is loaded.
.jumbotron{
background-image: url(../image/green-forest.jpg); }
Please try this code for setting your image to the Jumbotron class.
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
hi guys can i change the height of black box(black border in given image).
I read that it is control by fb.
I tried changing its height(320px) from firebug and it does in browser but i can't change in real css code.I even tried using dom method to access the div(class="_4s7c") in my case but failed.Is it really,we cant do anything about that.Please suggest me.Thanks
<style>
._4s7c{height:320px !important}
</style>
here is what i did in my view page
<div id="fb-root" style="background: #fff;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>`<fb:like-box href="http://www.facebook.com/EverestWomenTreksdotcom/" width="200" show_faces="true" border_color="#FFFFFF" stream="false" header="false"></fb:like-box>
</div>
I have changed the iframe height but i need to change the height of the divs that comes insdie the frame.
Try this,
#facebookID iframe {
height:300px !important;
}
or
#facebookID iframe[style] {
height:300px !important;
}
change the "#facebookID" with your real id from the html code.
div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled { background-color:#ff9966; }
div.task { background-color:#ffffcc; }
Now I want to print this
<div class="legend-container">
<div class="legend">
<div class="task_pending_execute"></div>
<div class="legend-text">Executing</div>
</div>
<div class="legend">
<div class="task_cancelled"></div>
<div class="legend-text">Finished</div>
</div>
...
</div>
For IE graph is rendered as image.
User browser set not to print background-color by default, but that's inacceptable in this concrete situation
I still don't want to subsitute 'color' div's here by images.
What css property should I use instead?
You can try using a colored border, something like this:
div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }
However, I'm not sure if IE considers borders as background or foreground when printing.
[EDIT: another idea]
Another solution would be to use Unicode Block Elements and then set the foreground (text) color.
<div>█████</div>
<div>█████</div>
However, this will fail on systems without proper unicode support, or without correct fonts.
Also, it will give you little control about what is the width of the legend, because different fonts have different widths. (maybe CSS #font can help you solve this, but I'm not sure)
Finally, maybe there are visible "seams" between each character, depending on the font. (this might be "fixed" by setting a negative letter-spacing)
Not something you can really do anything about. Background colour/image printing is a printer option and not something you should really count on - http://css-tricks.com/dont-rely-on-background-colors-printing/
I want to create an element using DIV and CSS like below:
Create By: <avatar image 16x16> Prashant
Can anyone tell me what will be the CSS and DIV code for above type of layout. I don't want to use tables for this, DIV and CSS only.
In Digg listing the same kind of display can be found. I tried but not able to make the "username" central align in respect of the avatar image.
<div>Created by: <img src="/images/avatars/prashant.png" alt="" /> Prashant</div>
and
img {
vertical-align: middle;
}
should do the job.
vertical-align unfortunately is not handled very consistently by some of the older browsers (pre-2005, but then yet again IE6 is still around), but David's answer is correct from the standards view.