I use HtmlRenderer to generate jpg images from html markup. However it doesn't apply background image from css:
<div style="background:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
Here is the C# code:
String ecardHtml = File.ReadAllText("testWithGoodImage.html");
using (Image img = HtmlRender.RenderToImageGdiPlus(ecardHtml, maxWidth: 440, textRenderingHint: TextRenderingHint.AntiAliasGridFit))
{
img.Save("result.jpg");
}
Debugging shows that the image is not even requested, so I suspect it's not supported. However <img> elements do work well.
So the question is how to make it work.
I know that I can render html on image in HtmlRenderer, but I want to have all markup only in html code.
HTML renderer supports background Image CSS, if you really want to do it in HTML then something like this will do the job :
<div style="width: 440px; height: 361px;position:relative">
<div style="position:absolute;top:0;left:0;z-index:8888"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw"/></div>
<div style="position:absolute;top:0;left:0;z-index:9999">Some content here.</div>
</div>
or simply add background-image not just background
<div style="background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
Related
<html>
<body style='margin: 0; padding: 0 50px; font-size: 12px;'>
<div style='page-break-after: always;'>
<h1>H1</h1>
</div>
<div>
<h2>H2</h2>
</div>
</body>
</html>
I can't use page break in HTML format which will be made into PDF, I've tried various ways but the results don't change, when I use the br tag it works but when entering the style page break it doesn't work.
I want to split the page between h1 and h2
I am using asp.net web form (without mvc) with c#. I am trying to show images through masonry layout and imagesLoaded and to start with I have written the following code:
<script src="../Plugins/masonry/masonry.pkgd.min.js"></script>
<script src="../Plugins/masonry/imagesloaded.pkgd.min.js"></script>
<style>
.grid-item { width: 200px; background-color: gray;
}
.grid-item--width2 { width: 400px; }
</style>
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
<div class="grid">
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item grid-item--width2"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
</div>
When I run this I see three large images. I am not able to understand how all this works. I would be getting image src in my c# code so how do I bind it here and ensure that it renders as per masonry layout and show the images.
i would appreciate if someone could please suggest an example where either json is used or through code behind how can I create this image gallery.
I have a background image like image.jpg. I want to resize this image according to any div which is using it.
How can i do this in jquery or any other way.
There's many different ways to do this. The best in terms of execution speed is to use CSS, but jQuery can accomplish anything CSS can using the $().css() method.
Here's a fiddle with four five different methods, from just putting the image in, to stretching in css and jQuery. The code is below:
<style>
div
{
background-image : url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Les_Halles_%28metro_de_Paris%29_-_Entree.jpg/800px-Les_Halles_%28metro_de_Paris%29_-_Entree.jpg");
height : 200px;
width: 200px;
margin: 10px;
background-repeat : no-repeat;
background-color: blue;
float: left;
}
#one
{
background-size:contain;
}
#two
{
background-size: 100%;
}
#three
{
background-size: 100% 100%;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<script>
$("#a").css("background-size","contain") //fits in aspect ratio
$("#b").css("background-size","100%") //constrained by width
$("#c").css("background-size","100% 100%") //stretch to fill
$("#d").css("background-size","auto 100%") //constrained by height
</script>
Hope this sheds some light on the problem.
There's some good references available on CSS, if you want to explore the properties and see what else can be done.
I am working on a project and in that I want to apply background fade feature when a panel opens on a webpage in asp.net. The fade in feature looks like the Facebook photo feature.click here to see Facebook photo effect
Here consider the photo as my panel and background as my web page.
Please help me with this as I don't know what this effect is called.
It's called an overlay and one way to do it is to append it at the end of your document:
Html:
<body>
... all your content ...
<div id="overlay">
<div class="pictures">
</div>
</div>
</body>
CSS:
body {
position:relative;
}
#overlay {
position:absolute; /** or fixed **/
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
By default your overlay is hidden. you can use JavaScript to set the display to block when the gallery is displayed;
i want to show an image in the browser page and to stretch it so it would fill the whole browser page.
i tried:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" Width="100%" Height="100%"></asp:Image>
and also tried using css:
<asp:Image ID="myimage" runat="server" ImageUrl="/Images/mypic.jpg" CssClass="myimage1"></asp:Image>
and in the CSS:
.myimage1{height:100%;width:100%;}
in both cases the browser (IE9), stretches the image with a height that is much bigger then the broswer hight and a right scroll bar is shown.
How can i stretch an image to the exact size of the current page size?
Its stretching to 100% of the parent container, which might be too wide. Try setting the width value of the body and html elements.
Try setting
html, body { width: 100%; height: 100%; }
Or you could use jQuery to find out the width of the parent element first and then set your image to that. No need to use ASP controls with this, just CSS and jquery.
$newheight = $('#yourimageid').parent().height();
$('#yourimageid').css('height', $newheight);
This will grab the parent elements height, and then append the value to the css height value
i found the solution using an img html tag and using CSS:
http://bytes.com/topic/asp-net/answers/850635-how-stretch-background-image-fill
add this inside the aspx page inside the body tag:
<img src="Styles/mypic.jpg" alt="" />
in the css:
html,body
{
margin: 0;
padding: 0;
}
img
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}