I want to set a background image for the body using image-set() by using this snippet :
body {
background-image: image-set(
"./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg"
);
}
But the body stills white.
However, when I use url() the body changed its background.
body {
background-image: url("./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg");
}
You are missing url and consider the prefix. Don't forget the the resolution like stated in the MDN doc:
Every image within an image-set() must have a unique resolution.
body {
background-image: -webkit-image-set(url("https://picsum.photos/id/1/200/300") 1x);
}
You still need to add the URL
body {
background-image: image-set(
url("./images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg")
);
}
Related
I am working with a Bolts theme in Wordpress. There is a Heroes widget for the main page with 3 "columns". I want to have a different picture for each element and then a different image yet again on the :hover effect.
The 3 static image appear as they should. However, the hover images only show the third selector's declaration to show image 135-3.jpg.
How do I get the first 2 images to be the hover images instead of the third image appearing in all three boxes?
.hero-columns__item {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
}
.hero-columns__item:hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg') !important ;
}
.hero-columns__item {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
}
.hero-columns__item:hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg') !important;
}
.hero-columns__item {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
}
.hero-columns__item:hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg') !important;
}
The problem is that the selector .hero-columns__item targets all three elements, and when you specify the background-image in the final .hero-columns__item:hover selector, it overwrites the background-image set by the previous two. Thus, the final background-image you set will be applied to all three elements.
To correct this, you'll need selectors that specifically target only the first, second and third elements respectively. This can be done by making use of the pseudo-selector nth-of-type:
.hero-columns__item:nth-of-type(1) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersResidential.jpg');
}
.hero-columns__item:nth-of-type(1):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/171-5.jpg');
}
.hero-columns__item:nth-of-type(2) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersTerraceHousing2.jpg');
}
.hero-columns__item:nth-of-type(3):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/177-5.jpg');
}
.hero-columns__item:nth-of-type(3) {
background-image: url('http://newsite.com/wp-content/uploads/2019/02/MainPageBannersDevelopments.jpg');
}
.hero-columns__item:nth-of-type(3):hover {
background-image: url('http://newsite.com/wp-content/uploads/2016/04/135-3.jpg');
}
Here, each element has a different selector, so only one of the rules will be applied to each. Note that :hover can still be chained to the pseudo-selector, as is shown above.
Also, don't use !important; it carries maximum specificity, and should be avoided unless absolutely necessary. I've removed their usages in my code above.
I have an issue with the backgroung of shop-image here is the LINK to shop page, and here is a screenshot
IMAGE
Here is the code that i tryed to change background :
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
background-image:none;
background-color:#111111;
}
Add !important to background-image property, try this:
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
/* important */
background-image:none !important;
background-color:#111111;
}
<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
I am using the toastr js plugin - toastr - and have made a css color change, however, I do not know how to go about creating the correct png/base64 part?
Original :
.toast-info {
background-color: #2f96b4;
}
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
I have changed this color to :
.toast-info {
background-color: #3276b1;
}
I actually contacted the github location awhile back and never got a response other than contact SO haha. For sake of having things correct I would like to make sure the base64 part corresponds to the new color.
EDIT - further info :
In response to the answer below. I believe you are incorrect. Correct me if I am wrong, but the background-image is basically a backup so it shows correctly in all browsers and does indeed reflect the color. Based on your comments... if that were true then this background image would not be needed at all and, if anything, would be the same for each color. As you can see this is not the case.
Here is the full css including my added info2 with the new color. So, basically the question holds. How can I create the correct base64 background image with my new color?
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-info2 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
.toast {
background-color: #030303;
}
.toast-info {
background-color: #3276b1;
}
.toast-info2 {
background-color: #2f96b4;
}
.toast-error {
background-color: #bd362f;
}
.toast-success {
background-color: #51a351;
}
.toast-warning {
background-color: #f89406;
}
I use custom toast with this css and javascript
toastr.success("text", "title", {"iconClass": 'customer-info'});
css:
/* icon */
#toast-container > .customer-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
background-color: dodgerblue;
}
The background image is not the background color. If you want to change the color, you already have it with background-color. If you want to change the background image, then you can set the url or base64. If you want an easy way to convert to base64,
use Visual Studio
install Web Essentials plug in
set the url to the file
right click on the url and Web Essentials menu will let you convert to base64
I'm creating a custom style for Facebook with the Firefox plugin Stylish. I'm trying to get the top blue bar flat, but I cannot. I use the CSS code:
#blueBar {
background-color: transparent !important;
}
But it has no affect on it. Why is this?
#BrockAdams - I tried that, still nothing so I just used:
#blueBar {
background-image: url("http://i.imgur.com/vUnrU8x.png") !important;
}
Try to use change id #blueBarHolder background. like:
.hasSmurfbar #blueBarHolder, .hasSmurfbar #blueBarHolder.slim,
.hasSmurfbar #blueBarHolder #pageHead,
.hasSmurfbar #blueBarHolder #headNav,
.hasSmurfbar #blueBarHolder #blueBar {
background: transparent !important;
}
Hope it will works.