I've an issue by using an base64-encoded SVG. I used the following SVG:
Menu Icon from iconmonstr
I passed this file through:
SVG Optimiser
& Base64 Encoder
Finally I created an a-element with two classes
.ui-icon-btn {
display: block;
background-color: red; //just a randomly picked color
}
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url('data:image/svg+xml; base64, [...]');
}
When I open Chrome's DevTools, it tells me, that the color has been overwritten. How can I avoid this?
Example on JSFiddle
Just place .ui-icon-btn after .ui-icon-menu in the CSS.
It was being overwritten as the stylesheet is read from top to bottom.
jsFiddle example
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url("");
}
.ui-icon-btn {
display: block;
background-color: red;
}
Alternatively, you could use background-image to add the image as opposed to just background thus, it then wouldn't be overwritten. jsFiddle example
The background: line is a shorthand for setting background-image, background-color, background-position etc. If you change it to background-image: instead, it won't overwrite the background-color style.
You have a space between image/svg+xml; and base64. That's not allowed as per spec. See this corrected fiddle: http://jsfiddle.net/53Zsr/2/
Apart from that, set only the background-image property, if you want to keep the color intact.
Related
I want to create a line with circles. Can this be done with background-repeat? Or do I need to set a picture as background? The circles should have a 5px radius.
p:after {
content: '';
background: 'rounded div of size 10x10px' repeat-x
width: 50%;
}
This is the only solution without using background-image or border-image encoded in base64 or using external files.
https://jsfiddle.net/3r6xsr0m/
html:
<div class="line"></div>
css:
.line:before {
content: "..................................................................................................";
display: block;
font-size: 60px;
font-family: Georgia;
color: #aaa;
max-width: 100%;
overflow: hidden;
}
Dots may differ depending of browser font rendering algorithm.
You'll have to create a 10px x 10px image of the dot and then use your method of repeating the background using either pseudo or just a new element. I'd go with a new div element if you can to prevent any issues across browsers like IE8. You'll also have to give your element a width if you go pseudo.
I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.
How do I do that with CSS?
If your margin is set on the body, then setting the background color of the html tag should color the margin area
html { background-color: black; }
body { margin:50px; background-color: white; }
http://jsfiddle.net/m3zzb/
Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color
Instead of using a margin, could you use a border? You should do this with <div>, anyway.
Something like this?
http://jsfiddle.net/GBTHv/
I needed something similar, and came up with using the :before (or :after) pseudoclasses:
#mydiv {
background-color: #fbb;
margin-top: 100px;
position: relative;
}
#mydiv:before {
content: "";
background-color: #bfb;
top: -100px;
height: 100px;
width: 100%;
position: absolute;
}
JSFiddle
That is not possible du to the Box Model.
However you could use a workaround with css3's border-image, or border-color in general css.
However im unsure whether you may have a problem with resetting.
Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!
html{margin:0;padding:0;}
Are you possibly looking to change the margin color outside the border? Maybe https://www.w3schools.com/css/css_outline.asp[outline][1] outline will help? Particularly
outline-color: green;
I've set background-image on a couple of span elements, but they aren't showing up, I think because my height and width settings are being ignored.
HTML source:
<div class="textwidget">
<span id="starthere" class="sidebar-poster"></span>
<span id="#primarydocs" class="sidebar-poster"></span>
<span id="donate" class="sidebar-poster"></span>
</div>
CSS:
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
None of the background images are actually visible.
In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.
[UPDATE - this part is solved, thanks] In Chrome Developer Tools, under Matched Rules, only the #starthere and #donate spans are actually picking up the background-image attribute. The #primarydocs span is not. Why not?
SPAN is an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;
I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.
Since a is display: inline; automatically it cannot take width and height attributes from CSS.
If you want to use the inline characteristic but without inner content (ie: <span>content</span>) and instead have a background image, use padding instead.
ie:
span {
padding: 10px;
}
but input the number of pixels you would need to show the image.
Solved it - you can't set height and width on span because it is an inline element. Switching to div solved it.
Phew.
If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.