I saw this Interactive Particle Logo on Codepen and I would like to add something smaller to my site. However, I couldn't understand how can I change it and add my own logo. I believe I need to change what is inside the data-src in the index.html and #hintImg in the style.less and provide my logo. Still, I don't know how to do this it is not like the simple img src where I can just upload the photo from my PC or paste the URL.
Source: https://codepen.io/Zaku/pen/EDaun
index.html
<body id="particle-slider">
<div class="slides">
<div id="first-slide" class="slide" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQCAMAAABh+/QGAAAC9FBMVEXu7u7u7u7////5+fn////u7u78/Pz7+/v////////////5+fn////////////7+/v////////////39/f////6+vr+/v76+vr////////39/f////v7+/9/f3v7+/////////+/v74+Pj////////////////////8/Pz5+fn////////////w8PD+/v7z8/P////7+/v////////9/f3u7u7////////4+Pj////////////////////////////////////u7u7////6+vr////09PT////////////////////////////////4+Pj////////y8vL////////////////////////v7+/////////////09PTu7u79/f3////////39/f////////////////////////////////////////////8/Pz////29vb////////z8/P////////////////x8fH////////////////////////z8/P////z8/P////////////////////////////////////19fX////v7+/x8fH////////////////////39/f////////w8PD////////x8fHz8/P////////////z8/P19fX////19fX////////////y8vL////29vb////x8fH////29vb////////////////////////////////v7+/////////////////x8fH////////19fX19fX////////x8fHw8PD09PT29vb////////w8PD////////y8vLw8PDw8PDy8vL09PTv7+/////////////////////////////////////////////////////////////////4+Pj////v7+/////y8vL///////////////8AAADu7u7u7u7v7+/y8vL19fXz8/P29vb5+fn4+Pj09PT39/f6+vr9/f37+/v8/Pz+/v7v7+////8Ohw90AAAA6nRSTlP+/VG3EfiorVyeTbVdYkysPhdSvl+yobNjU8Fg9qf3NWGjuzuEG0kSq7YfHVjuotZtrpwypftBIryRXlcWnXaNm5P5g7CQ0RpkixNFlHs9vXpW3UoUfk98dPRO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">
</div>
</div>
<canvas class="draw"></canvas>
style.less
#hintImg: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAgCAMAAAAmC6asAAAAMFBMVEX19vf19vft7u/19vfp6uv19vfx8vP19vf19vf19vf19vfm5+j19vcAAAD19vfl5udu+MchAAAADnRSTlOIVcIz10StZneZEewiAMEzGswAAAF/SURBVHja7ZXZbsQwCEXjneXa/P/fFntm0uRpVGkaqVX8YAW4cMCxkq1ftW7STbpJP1sJb0lFPkJiekuq4TMkfkti+gxpe0uivRmB9LQOlHraNixnYErPONAfcYZntYfv9aDtJTmUO5OCeukGR5paqZtbGaSVzYWIlZ9DI6vVpC6shJw5TzdlZk47qZpldAkteBVToxNJrLGqoil6MPE9A1bSNorUXPYWvbLUjbg37lwRNPYW6x6eJK4ilB2hVmChJw2nWx4He3Map1exMVFvQyMVN78rlexbY7Gk0tWUm7gsHUnikQ6dwzLRLM/tRKIlGMMFoijmpthqBocLFTLWO41GnhrFXZIGTiTz5pIyA9G4uqSeSV3W4bSsqvycg0x9RTpcKHaHHybNOZBXfPa41jNjLCeqjRopzgI4kXYcsDqVZWJaZwVWHpYBTOuoACCvEpjTC3DFd6/oVV9YmPw+CWsb+H1SxVWkkgkoV5B6ijasXnMjBPIf/u436e+TvgDCaqPX6lO5yQAAAABJRU5ErkJggg==');
html, body {
background-color: black;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.slides, & > .dg {
display: none;
}
}
#media (min-width: 1000px) {
body {
background-image: #hintImg;
background-repeat: no-repeat;
& > .dg {
display: block;
}
}
}
You need to change the data in the div#first-slide block. The section data:image/png;base64, remains the same, but you need to replace the rest with a Base64-encoded version of your desired image.
To create the Base64 data, you can use one of the various websites that will do this for you - upload your image and you'll get the Base64 text to paste into your code. This is a random one I found with a quick search. I used it to grab a random PNG image, convert to Base64 and replace the text in the Codepen you provided - and it worked.
Related
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
I'm designing my future blog page, and i realized that most of people load the same exact image twice, in this case a bigger logo image and a medium or small logo image.
The thing is, you already loaded a big logo image, so why waste resources loading a smaller version instead of just using the same image and resizing it with css?
I couldn't find any reason to do that, so i began to think of methods to use the same image several times, reducing the http request and page load time.
The idea i have now is using a sprite with just 1 image, the big logo, then you just use it twice:
Full logo: just use it as you would use any other sprite image
Medium logo: Resized sprite image
Right now this is the best way i found to do it:
http://tobyj.net/responsive-sprites/#notes
I am looking for the best way to do this, or another alternative, but no JS, having to load a js file defeats the purpose of reducing HTTP requests.
What do you think? any ideas?
Greetings.
SOLVED: Thanks guys, it was easier than i thought, and now i'm thinking, who the hell design the templates? they add a ton of duplicated not needed HTTP requests and code :S
You can:
1. Resize the img
img {
max-width: 100%;
height: auto;
}
.big-logo {
width: 100%;
}
.medium-logo {
width: 50%;
}
.small-logo {
width: 30%;
}
<div class="big-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
<div class="medium-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
<div class="small-logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
</div>
2. Use the image as a background
.big-logo,
.medium-logo,
.small-logo {
background: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png') no-repeat top left;
background-size: cover;
}
.big-logo{
width: 500px;
height: 149px;
}
.medium-logo {
width: 250px;
height: 74px;
}
.small-logo {
width: 150px;
height: 44px;
}
<div class="big-logo"></div>
<div class="medium-logo"></div>
<div class="small-logo"></div>
Sorry if this question seems trivial, this is the 1st time I've used an svg file, and was unable to resolve the issue with existing Q and A on stack.
I have a logo which is an svg file. I want to make the logo 'clickable' and work as a link to the home page. I initially did this with a jpeg and all worked as expected, but once I switched to an svg the logo does not display (however I verify if I click in that general area the link works). Does anyone have any recommendation on what I need to change so the image displays?
I'm beginning to think this may have to with Azure (while the svg opens locally it does not open through the project, while other image files do.
SVG file was created using inkscape and renders correctly on a browser when opened as a standalone.
JavaScript loads header onto each page:
//Header for Main pages, with Logo
function getHeader()
{
var header='<ul id="hlogob">'+
'<li>Home</li>'+
'</ul>'+
'<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}
CSS Styles the header, and link with a background image (want it to be my svg)
/*Header styling and Logo*/
.header
{
background-color:#FAFAEB;
text-align:center;
font-family: Algerian;
color: #37342a;
height:100px;
padding-bottom:10px;
/*border-bottom:5px inset #DCDCDC;*/
margin:0px;
line-height:20%
}
ul#hlogob li
{
display: inline;
list-style: none;
}
ul#hlogob li a
{
color: #999;
text-decoration: none;
}
a.hlogo
{
display: inline-block;
background: url("../Images/bighat4.svg") no-repeat;
background-position: center;
background-size: 100px 70px;
width: 100px;
height: 70px;
text-indent: -9999px;
text-align: center;
margin: 0;
}
a.hlogo:hover
{
border: none;
}
Header is loaded by js onto each page
<header class="header" id="header">
<!--Loaded by Script-->
</header>
<script type="text/javascript">
getHeader();
</script>
The issue as it turns out is not with the code, but with the default settings on azure which do not have mime type for svg. See Use SVG in Windows Azure Websites
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.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 */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.