I'm trying to embed an image into my css directly as encoded data:
background:#fae url("data:image/gif;base64,
R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jv
b29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//
mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Eky
ky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCm
TIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr
7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7")
no-repeat;
But, it fails. What's even more weird is that embedding the data URI directly into an image tag does work:
You can check my example out at: http://jsfiddle.net/cAb2y/1/
Am I doing something wrong?
(source example: http://www.websiteoptimization.com/speed/tweak/inline-images/)
Remove all of the line breaks or spaces from the Data URI:
h3 {
width:50px;
height:50px;
display:block;
border:2px red solid;
background:#fae url("data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7") no-repeat;
}
Related
#hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') 50% 0 repeat
}
Here is my code but still doesn't work
Without more information (some HTML to go with it) or a webpage you are having trouble with, it is very hard to understand what you are trying to accomplish.
I would try something like this, as it sounds like you are trying to have the background image repeat.
hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg') repeat;
}
https://www.w3schools.com/cssref/css3_pr_background.asp
Try this, But you need to add this to your header.php or any PHP file header section. This will not work in CSS file.For more details visit URL
<style>
.hero {
background-image: url("<?php echo content_url(); ?>/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg") 50% 0 repeat;
}
</style>
Hope this will help you.
Just navigate up a directory or two using ../
hero {
background: url('../../img/hero-bg.jpg') repeat;
}
I am assuming hero is your class name thats why prefixed with .
In your code I could not find . , so check the same one more time.This also can be one issue if it is not there in your code.
Can you try this way:
.hero {
background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg');
background-size: 50% 0;
background-repeat: repeat;
}
<style>
background-image: url(".....");
</style>
The background tends to be blank when I use this snippet.Is there any other way to get background image for my page ?.
The background tends to be blank when i use this snippet
That's because you haven't specified the tag in which you want to
apply the background image to.
you haven't specified a valid path to the image.
Simply do something like below but of course replace the URL with your own:
body {
background-image: url("paper.gif");
}
You need to specify which element you want to give the background.
Either you give the element a class or a id or something like body.
.class {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
#id {
background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}
body {
background-image: url("https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png");
}
<div id="id">Test1</div>
<div class="class">Test2</div>
Also you can write it inline
<body style="background-image: url('img/bg.jpg')">
You need to specify the tag, class, or id you want the background-image to be in. Example
body, .class, #id {
background-image: url("img.png");
}
or inline-style
<div style="background-image: url('something.gif')"></div>
You also need to be sure of the image path of the image you want to put
for instance if image is in the same folder as css or html say
body {
background-image: url("image.png");
}
if in a folder outside the css folder
body {
background-image: url("../foldername/image.png");
}
and so on
don't know if it is possible, but I'd like to scale all images on my site with the following:
.myClass img {
height: auto;
}
However, all *.svg-files shouldn't match that pattern. Is there a way to do this via native css?
I found something like this:
.myClass img[src$=".svg"] {height: auto;}
But that seems to trigger only for svg-files. Trying to use != seems to be syntactically incorrect.
For this you'll want to refer to the attribute-selector.
Example:
.myclass[src$=".svg"]
Reference;
http://www.w3schools.com/css/css_attribute_selectors.asp
Edit;
Just saw your edit.
In css you can also use a :not(selector)
example:
.myclass:not([src$=".svg"]);
.myClass img {
height: auto;
}
.myClass img[src$=svg i] {
height: 100px;
}
first set height to all images, then reset the setting for all images having src with suffix svg case insensitively
I'm trying to change img src (not the background img src) with css
<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>
#btnUp{
cursor:pointer;
}
#btnUp:hover{
src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}
You can use :
content: url("/_layouts/images/GEARS_AN.GIF")
There is another way to fix this : using CSS box-sizing.
HTML :
<img class="banner" src="http://domaine.com/banner.png">
CSS :
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
http://css-tricks.com/replace-the-image-in-an-img-with-css/
you could try something like this
<img id="btnUp" src="empty.png" alt="btnUp" />
or
<div id="btnUp" title="btnUp"> <div/>
#btnUp{
cursor:pointer;
width:50px;
height:50px;
float:left;
}
#btnUp{
background-image:url('x.png')
}
#btnUp:hover{
background-image:url('y.png')
}
You can use CSS to a) make the original image invisible by setting its width and height to 0, or moving it off-screen etc, and b) insert a new image in its ::before or ::after pseudo-element.
That will be a performance hit though, as the browser will then load both the original and the new image. But it won't require Javascript!
You can't set the image src attribute via CSS. you can get is, as if you wanted to set use background or background-image.
No - CSS can only be used to change CSS background images, not HTML content.
In general UI elements (not content) should be rendered using CSS backgrounds anyway. Swapping classes can swap background images.
You can use a mixture of JavaScript and CSS to achieve this, but you can not do this with CSS alone. <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" />
Instead of img you would put file name sans file type.
function change(img){
document.getElementById("btnUp").src= img + ".png";
}
function changeback(img){
document.getElementById("btnUp").src= img + ".png";
}
Then you use CSS to modify the img tag or the id to your liking.
You could set the image to a completely transparent image, then change the background image like so:
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
The images do have to be the same size though. :(
Hope this helps!
content:url('imagelinkhere');
This is working, I tested it
Basically I am trying to to make a forum made using MyBB look more personalized from the current theme. Currently the theme I have is using a 1 pixel wide 100 pixels and is using the following code to repeat that accross the background off the header to give it a gradient look:
background: #202020 url(images/1/header.png) top left repeat-x;
What I'm looking to do is have a scrolling images there. To make sure it's 100% clear check out this link and look at the header.
Click to be Taken to Example
So basically how do I do pretty much exactly what they have done on that page with a scrolling images?
Edit: If it helps at all here is the link to the site. I'm making it for a friend:
Click
Edit2: Logo's full css looks like this:
#logo {
background: #202020 url(images/1/pan.jpg) top left repeat-x;
border-bottom: 1px solid #000;
text-align:center;
}
Try something like this: (see it working here)
The HTML:
<div id="header">header</div>
<div id="content">content</div>
The CSS:
#header {
width: 100%;
height: 321px;
background: url(http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg) 0 0 repeat-x;
}
The JS:
var banner_width = 512;
var banner_x = 0;
function moveBanner() {
banner_x = (banner_x - 1) % banner_width;
$('#header').css('background-position', banner_x + 'px 0');
}
setInterval(moveBanner, 50);