I am uploading html document to Google Docs thru API. All images are set inline, but I prefer fixed (text wraps around). Is there a way to mark it on html, so that imported document has each image correct way aligned or is there a way to set image wrapping on API before uploading?
For a reference this is what I want, but doing it automatically:
https://drive.googleblog.com/2010/07/tips-tricks-using-images-in-google.html
I think something like this
<body style="background-image: url('test3.jpg'); background-repeat: no-repeat; background-position: center; background-attachment: scroll;"> color name <br><br><br></body>
<body style="background-image: url('test3.jpg'); background-repeat: no-repeat; background-position: center; background-attachment: fixed;"> color name <br><br><br></body>
see background-attachment: fixed
Related
I am using mPDF(v7.0) to create a PDF from my HTML. I want to create a PDF that contains an image, within a div (.container-sizing). I have to be able to have the ability to position the image within .container-sizing using CSS and zoom and flip the image.
I have tried the below:
CSS
.container-sizing {
overflow: hidden;
position: relative;
width:600px;
height:430px;
}
.img {
max-height: 100%;
position: absolute;
top: -100px;
left: -100px;
right: 0;
bottom: 0;
margin: auto;
transform:scale(1, -1);
}
HTML
<div class='container-sizing'>
<img src='images/my-image.jpg' alt='' class='img'/>
</div>
This doesn't work as it ignores overflow:hidden on the containing div - which is pretty essential when positioning the image. Instead, I tried styling the image as a background image, which works great but then I have run into problems with transform: scale(1, -1). Despite mPDF's documentation saying that this is supported, it doesn't seem to work when applied to a background image.
CSS:
.container-sizing {
width:600px;
height:430px;
overflow: hidden;
}
.img {
background-image: url('images/my-image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width:600px;
height:430px;
transform:scale(1, -1) ;
}
HTML:
<div class='container-sizing'>
<div class='img'></div>
</div>
Does anyone have any ideas how I can get this working to produce a pdf that shows the image how it is declared in the css?
Thank you!
After spending ages trying to figure this out, I ended up dropping mPDF and using domPDF instead as this supports the overflow: hidden property I needed. Just posting in case anyone else runs into a similar issue!
In the home page the thumbnail image box shows the image of the post like this:
Is there anyway I can make the thumbnail image box contain the image of the post?
It always zoom the picture in any post I make, whatever the the dimensions of the image are.
I have played a little bit with the css of this part but I couldn't get it to contain the image.
Thank you
my blog URL: www.aflamtalk.com
You can try background-size: contain on the span.snippet-thumbnail-img selector.
Like so:
span.snippet-thumbnail-img {
background-size: contain;
}
This may or may not be the effect you desire. It depends on your use case
Search for the following block of code
.post-outer .snippet-thumbnail-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
And change background-size: cover; to background-size: contain;
I have found the solution in changing:
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "1:1").cssEscaped'/>);
to
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "16:9").cssEscaped'/>);
in <b:includable id='normalPost'>
I have an image that needs a border-image over the image and not around it.
The border is an transparent png.
See here what happens if I use border:
You can see that the image holds a white background.
I would like to have the border to be over the image. After some Googleling I found outline. Here I can set a negative value. The problem here is that outline can't hold images......
I tried setting negative values on margin for the image and the border but that didn't help.
Anyone ideas?
Here is the code (not very interesting):
<div class="top_img">
<!-- some content -->
</div>
Here is the CSS:
<style>
background-image: url(the_image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
border: 20px solid transparent;
border-image: url(images/border_image.png) 30 round;
</style>
I have a really cool photo as my website portfolio but i cant get it responsive and fit the div. It fills the entire div but the entire photo isnt fittinf properly. I am using bootstrap.
This is my css
.bg1 {
background-image: url (../img/brain.jpg);
background-size: 100%;
height: 600px;
}
try this:
.bg1{
background-image: url (../img/brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo link
More info here: Perfect Full Page background
You can try load your image with a <img> tag, and add img-responsive class which is supported by Bootstrap. See more in http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I have an <img> that shows a remote image.
I want it to fallback to another local image, in the case where the remote one is not reachable.
<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico">
.cc_image {
width: 256px;
height: 256px;
}
.cc_image.fallback {
/* this URL here is theoretically a local one (always reachable) */
background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}
It works so that when the src image is not found then the background image will be shown.
The drawbacks are:
it will always load the background image (additional HTTP request)
it shows a little not-found-icon (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)
How could I solve these issues?
Or: are there other technics to achieve the same result?
I found this question but the given solutions rely on Javascript or on <object> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.
I know about the multiple background-image but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
Or I was thinking about embedding a SVG image as data-uri.
Suggestions for the most flexible (and compatible) method?
Unfortunately, you can't achieve both without Javascript or object tag.
You could do this to avoid the missing image icon:
Place your image in a container (it might already be in one).
Make the container have the same width and height as the image.
Set the fallback image as the background image of the container.
Set the remote image as the background image of your img tag.
Load an 1x1 pixel transparent png as the src of your image (see code for how that can be done without an extra HTTP request).
Code:
HTML
<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>
CSS
.fallback {
background-image: url(*fallback image here*);
display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
min-width: specify a minimum width (could be the width of the fallback image) px;
min-height: specify a minimum height (could be the height of the fallback image) px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
.cc_image {
min-width: same as container px;
min-height: same as container px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
min-width and max-width make sure that the background images remain visible.
background-position makes sure that the central part of the images remains visible and is a graceful degradation for older browsers
background-size resizes the background image to fill the element background. The cover value means that the image will be resized so it will completely cover the element (some of the outer edges of the image may be cropped)
The base64 data in the img src tag is a transparent 1px png.
This will have an additional benefit that regular users and some bots may not be able to save your images (a rudimentary image protection)
The only drawback is, that you will still have one extra HTTP request for the fallback image.
I have found a solution on Codepen, which I would like to share with you:
https://codepen.io/anon/pen/Eqgyyo
I prefer this solution, because it works with real image tags, not background images.
body {
color: #2c3e50;
font-family: 'verdana';
line-height: 1.35em;
padding: 30px;
}
h1 {
margin-bottom: 40px;
}
ul {
list-style: none;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
color: #95a5a6;
font-size: 12px;
min-height: 50px;
position: relative;
}
img:before {
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 3px;
content: '\1F517' ' broken image of 'attr(alt);
display: block;
left: 0;
padding: 10px;
position: absolute;
top: -10px;
width: 100%;
}
<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />
<br /><br />
<ul>
<li>✓ Firefox</li>
<li>✓ Chrome</li>
<li>✓ Opera</li>
<li>✗ Safari (desktop, mobile)</li>
<li>✗ iOS webview</li>
</ul>