I have this HTML layout:  &lt;div class="profile-img"&gt;     &lt;img src="https://via.placeholder.com/150"&gt; &lt;/div&gt;   with this CSS  .profile-img, .profile-img &gt; img {     width: 160px;     height: 160px;     border-radius: 50%; }   Here is my JS Fiddle:    What I am trying to do now, is add the attached image to bottom right corner of the circle image....how would I go about that and make the image in the bottom right corner clickable?
10149
I'm a beginner at rails programming, attempting to show many images on a page.  Some images are to lay on top of others.  To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner).  I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.  I just want to position overlapping images relative to one another.  As a more difficult example, imagine an odometer placed inside a larger image.  For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.
64028
I want to use one of the Adobe Creative Suite 5 programs to create an image sprite of all the small icons and images on my webpages.   I've done it a number of times before in Photoshop but can't quite get every icon to be at the exact coordinates I intend them to be at.  The last method I used was to explicitly define the correct size of each as a shape, and use snap-to and line guides to line them all up where I want each image, and then insert the images and hide the shapes.   This takes a little while and to my dismay, there always seems to be something that's a pixel or two out of place, messing with my beautiful site designs.  What method can I use to set up a grid of images with varying sizes to be at specific coordinates?  Which of the Adobe CS5 Programs has the best functionality for this?  and a loosely relevant side question..  For the purpose of rendering in a browser as fast as possible, should the images be lined up vertically, horizontally or in a roughly equal sided rectangle?
118713
I can insert an image like so:  ![Desc Text][1]     [1]: http://www.funnycatpix.com/_pics/What_Are_You_Doing522.jpg   I can also link to said image:  [![Desc Text][1]][1]     [1]: http://www.funnycatpix.com/_pics/What_Are_You_Doing522.jpg   And you can click the image to open in a new tab (useful for big images).  Can some markdown be added to do this? I'm thinking of this sort of syntax:  !![Desc Text][1]     [1]: http://www.funnycatpix.com/_pics/What_Are_You_Doing522.jpg   Double ! or maybe some other symbol combo.
109050
I have a title page, which used a \vfill from the middle of the page, to push a line of text to the bottom. I inserted an image in this page, and wanted it place in the middle (vertically) between middle-of-page and the bottom text, and so inserted another \vfill there. This, however, doesn't seem to make the spaces on top and bottom of the images exactly equal.   I think that is somewhat demonstrated on this MWE:  \documentclass{book} \usepackage{filecontents} \begin{filecontents*}{test-image.tex}   \documentclass{standalone}   \usepackage{tikz}   \begin{document}   \begin{tikzpicture}   %\draw[thick] (0,0) rectangle (3cm,3cm);   \draw[line width=2mm] (2.8cm,1.5cm) arc [start angle=0, end angle=-240, radius=13mm];   \end{tikzpicture}   \end{document} \end{filecontents*}  \immediate\write18{pdflatex test-image.tex}  \usepackage{graphicx} \usepackage[   paperwidth=15cm,   paperheight=20cm,   outer=2cm,   inner=2cm,   top=2cm,   bottom=2cm   ]{geometry} \usepackage[a4,center]{crop} \crop[cam,info] % info is default, noinfo has to be set; use [off] to turn off all marks  \usepackage{lua-visual-debug}  \begin{document}  \frontmatter \begin{titlepage}   \begin{center}     {\Huge Testing the testing test, of the testing test}   \end{center}   %   \vspace{4 cm}   \begin{center}     {\large       Line One     }\\     \vspace{0.2cm}     {\Large       Line Two     }   \end{center}   % BOTTOM PART   \vfill   \begin{center}                                  % INSERT   \includegraphics[width=4.75cm]{test-image.pdf}  % INSERT   \end{center}                                    % INSERT   \vfill                                          % INSERT   \begin{center}     The bottom line is here.   \end{center} \end{titlepage} \end{document}   Compile this with lualatex -shell-escape test.tex. The resulting PDF I opened in inkscape, and added dimension lines and their length in what Inkscape sees as millimeters, and got this (note Inkscape corrupted some of the fonts; click for high-res):    So, the top and bottom length should be equal, but the top is 18.34 mm and the bottom is 19.72 mm in height (and in my actual example, I think I have an even more extreme difference, I just couldn't reconstruct it here).  Basically, the way I understand \vfill, if there are two \vfills, since they are of the same "order of infinity", the remaining space should be equally split between them; but apparently, there is a difference. Why does this difference occur - and how could I position the inserted logo, so the vertical spaces above and below it will be exactly equal?
58040
I want to add background image, to part of my header i wrote code like this.  but its not working.   &lt;div style="{!'background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}"&gt;  &lt;/div&gt;     doInit : function(component, event, helper) {          var url = $A.get('$Resource.RollingHillsGrey1');         component.set('v.backgroundImageURL', url);     }
2794
I need to place a small image in the caption of an image, but I don't know how, please help.  \begin{figure}[H]    \begin{center}        \includegraphics[width=9.5cm]{figure.eps}\\ \caption{Some text [SMALL IMAGE HERE].}\label{figure} \end{center} \end{figure}
23427
I use \includegraphics command to insert image to the document. But how can I add a border around this image w/o any margin between border lines and image? It seems to be very easy, but I can't find it in the documentation.
60509
We are using the following technique to lazy load images in our site:  For all images we put in the src attribute a url for a default img (i.e. a loader) and put the actual image url in the data-src attribute. Like so  &lt;img src="loader.gif" data-src="img1.jpg" /&gt;   When the image is outside of the viewport nothing happens, but when the image goes inside the viewport, then the url from the data-src attribute is loaded and the image is correctly shown.  This has as a result that Google sees all the images in the page (i.e. a search results page) as having the same src attribute. Because the google bot of course parses only the 'unloaded' img tag with the default src.  My question is: does having many img tags with the same src attribute affect the SEO of the page?
21808
I'm trying to achieve the effect shown below, but with a photograph and I'm having some trouble maintaining the height width ratio so the photograph doesn't look too distorted - can anyone offer any tips or tutorials?  Thanks in advance for your help.
58143
I would like to insert a logo for the exam questionnaire on the upper right where the title is placed but i dont know how.. i would like to appear it this way.
47717
I want to:   Show an image full width On click, make a small sized image placed at a particular location starting from top left and show another image full width Repeat the process till all four images are shown End with a grid of four images vertically and horizontally centered   The problems I am facing is:   The location of the grid images changes as the third image (bottom-left) in the grid is displayed   Possible improvements I am looking at are:   When I go from full width image to the 'overview' slide, the transition should be like zooming the image to that location Better code than the one I have used?   Below is the MWE.  \documentclass[xcolor=dvipsnames,english,professionalfonts,smaller]{beamer}  \usetheme{Madrid}  \usepackage{graphicx} \usepackage{parskip} \usepackage{mwe} \graphicspath{{.}{./image}}  \begin{document}  \setlength{\parskip}{\bigskipamount}  \begin{frame}{Title Text}      \only &lt;+ | handout:0&gt; {\hfil \fbox{\includegraphics[width={\textwidth}]{example-image-16x9}}}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}} \\ \vspace{.09in}}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}} \hfill}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}}}     \transduration&lt;.&gt;{.01}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={\textwidth}]{example-image-16x9}}}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \\ \vspace{.09in}}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}} \hfill}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}}}     \transduration&lt;.&gt;{.01}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={\textwidth}]{example-image-16x9}}}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \\ \vspace{.09in}}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\phantom{\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}}}     \transduration&lt;.&gt;{.01}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={\textwidth}]{example-image-16x9}}}     \only &lt;+ | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \\ \vspace{.09in}}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}} \hfill}     \only &lt;. | handout:0&gt; {\fbox{\includegraphics[width={.470\textwidth}]{example-image-16x9}}}  \end{frame}  \end{document}
30295
#container {     width: 75%;     float: right; }   If I change the width to %100 it affects the entire site, i just want the homepage to be at 100% width and all other pages with sidebar 75%
15262
So I am trying to insert a functioning tikz image into a beamer project and it keeps giving me an error.  \documentclass{beamer} \usetheme{Warsaw} \usepackage{tikz} \usetikzlibrary{shapes,trees,positioning} \begin{document} \begin{frame}{Examples} \begin{center} \begin{tikzpicture}[level/.style={sibling distance=60mm/#1},minimum size=20pt,scale=.8, every node/.style={transform shape}] % If you want to scale the picture insert ``scale= (something), every node/.style={transform shape}'' Ex:[level/.style={sibling  distance=60mm/#1},minimum size=20pt,scale=.8, every node/.style={transform shape}] would  scale to 80% of original size \node [circle,draw] (z){\textbf{$u$}}   child {node [circle,draw,fill=black,text=white] (a) {\textbf{$v$}}     child {node [circle,draw,fill=black,text=white] (c) {}}     child {node [circle,draw] (d) {}     }   }   child {node [circle,draw,fill=black,text=white] (b) {\textbf{$w$}}     child {node [circle,draw,fill=black,text=white] (e) {}}      child {node [circle,draw] (f) {}}   }; \end{tikzpicture} \end{center} \end{frame} \end{document}   The error I keep getting is:   ./SDN Presentation.tex:61: Illegal parameter number in definition of \iterate. &lt;to be read again&gt;                     1 l.61 \end{frame}   If I delete the /#1 at the beginning of the picture I get an image though not the one I am looking for.  Not sure how to fix this issue since the code works for the amsart document class.
37877
I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:  $('myObject').css('background-image', imageUrl);   This seems to be not working, as:  console.log($('myObject').css('background-image'));   returns none.  Any idea, what I am doing wrong?
914
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.   On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
37077
Hi my client has given me a load of images for the site I'm building for him, they are going in a Javascript Image Nivo Slider Banner at the top, the size of the banner is 720px x 200px but the images aren't.  I can crop the images, but I wonder if there is a way to resize them and change the proportion without destroying the quality, or due to the nature of how pixels work is this not possible?  I would like to be able to turn them into wide angle images and work from there.  I have Photoshop CS6 Ext.
108675
This is perhaps a simple question with a simple answer, but I'm stumped as a tikz novice. What would be the best method to add an image (logo) file to the upper left-hand corner of my document?    MWE:  \documentclass[12pt]{article}  \usepackage{lipsum} \usepackage{showframe} %\usepackage{tikz} %\usepackage{graphicx}  \begin{document}  \section*{Lorem Ipsum}  \lipsum[1]  \end{document}   I wish to avoid using fancyhdr to achieve this result.