Could you please tell me to write a text in the middle of an image? I should do it without using div tag.I can succeed doing it by using h:panelGroup or primefaces tag? I created my image by using tag?
Best Regards
Alper
Try this
<h:panelGroup style="display:block; text-align:center; background-image: url(./images/yourImage.png); background-repeat: no-repeat; background-position: center;">
<h:outputText value="TEST" />
</h:panelGroup>
Note 1: Setup proper path in background-image URL, add image size if needed, add vertical align if needed.
Note 2: you can move styles in css and use styleClass attribute in h:panelGroup.
Related
I want to make img tag responsive in the same way as in a div using background image with background-position: center and background-size: cover
My problem is, that I'll be posting a lot of images(in a grid layout) that don't have the same width or height. Soo, if I use img tag with height:auto I get different height everytime.
Current sollutions:
1.
Using bg-image and 1pixel image for width and height:
<div style="background-image:url(http://example.com/img.jpeg);
background-position: center;
background-size: cover; width="30%" ">
<img src="/1pix.png" height="200px" alt="Alt text">
</div>
Using background image and img inside with visibility:hidden
<div style="background-mage:url(http://example.com/img.jpeg);
style="background-position: center;
background-size: cover; height="200px" width="30%">
<img src="/example.jpeg" style="visibility:hidden" alt="Alt text">
</div>
3.Using multiple img sizes (small,large,medium)
Is there a way to make img tag work in a fluid grid,make it look as nice as in bg-image(bg-contain) or to make bg-image SEO friendly with some sort of meta tag that works in a same way than the alt tag.
Thanks!
If you're willing to use a polyfill for IE, the object-fit CSS property can help you out here. It's basically background-size but for HTML tags. You would need to define a height and width for the <img> and add object-fit: cover;.
Browser coverage for object-fit can be found here and a polyfill for IE8+ can be found here.
I am trying to use 1 single image file containing 4 images and display them using CSS sprite. Somehow, all 4 images are displayed. I was referring to one of the examples in w3schools.
<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
<img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
<img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>
CSS:
#ViewTypeContainer img#calendarView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') 0 0;
}
#ViewTypeContainer img#grdView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') -30px 0;
}
My image file is in .png format:
Can anyone spot my mistake? Thanks.
Yeah: your img tags have their src attributes pointing at the sprite image too.
If you want the sprite image to show up with the positioning specified in the CSS, the images need a transparent image in their src attribute.
Working example using your image here (I've used a data-URI for the transparent GIF):
http://jsfiddle.net/7Ns8L/
And here's another example using what might be more semantic HTML (depending on what these controls actually do), i.e. no <img> tags:
http://jsfiddle.net/7Ns8L/1/
Exactly. You're giving a background image to an image. So the IMG tag is displayed as normal size right over the top of your sprite. The concept of sprites is easiest applied if you work with background-position css property. You could either go through the trouble of generating a transparent .png for your IMG tag source (I wouldn't recommend it), or just replace the IMG tag with a div and give the div the same ID and CSS.
In my JSF 2 - Primefaces 3 web application, I am using <p:panelGrid> and <p:panel>. I have multiple components inside them which are left justified. I need to all to be center align. How can we do this I tried to use div but it does not work.
Look at the generated HTML output and alter CSS accordingly.
If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.
If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.
If you want to set the content of a primefaces:panelGrid to center you can try this:
<h:panelGrid column="1">
<h:panelGroup style="display:block; text-align:center">
your contents...
</h:panelGroup>
</h:panelGrid>
We are using RichFaces, but the solution that we used in this case may apply to Primefaces as well. We used to style the inner elements with css.
Once you render the page in the browser, you can look up the source code and find out what HTML elements are rendered. Then create specific CSS classes and style the whole panel or the inner elements in panelGrid to that class.
Most of the time, this was the easiest solution and also sufficient.
Try with css and p:panelGrid columnClasses attribute:
<p:panelGrid columnClasses="centered">
...
</p:panelGrid>
then in your stylesheet create a class like:
.centered {
text-align: center;
}
If you have components in your p:panelGrid column other than just text, add the margin attribute to your css class:
.centered {
text-align: center;
margin-left: 50%;
}
I have a td and want to put a bg-image in it. In know there are different problems with using newsletters with css on different clients.
I tried this:
<td style=" background-image: url('...absolute path...');
background-repeat: repeat-y no-repeat;
width: 15px;">
</td>
I tried also to add a class attribute to the td and putting the css in head.
Nothing works, the img does not appear.
EDIT:
Now I read from a German source that outlook does not support many css attributes like
background-image
background-position
background-repeat
display
float
position
How can I add a background image to a td element?
I don't think that background image in css is supported in Outlook like that.
http://www.campaignmonitor.com/css/
I think, that the only way to put an image in a td is:
<td><img src"#" /></td>
Of course if you don't have other content than the image.
How to put an image over another bigger image, like on youtube, a play button is displayed on top of video thumbnail?
Make a semi-transparent PNG graphic with a "Play" symbol and the size you want (e.g. 240x320).
Let's say you named it "overlay.png", and let's say the YouTube-generated thumbnail is at http://img.ytimg.com/abcdefg/0.jpg
Now all you need in your code is this:
<a href="destination_of_your_link">
<img src="overlay.png" width="320" height="240" border="0"
style="background: url(http://img.ytimg.com/abcdefg/0.jpg) center center black;" />
</a>
As long as your target audience is not still using IE6, you should be safe.
I'm not sure that YouTube uses images for this effect, isn't it still the Flash player?
Anyhow, exactly how this is done depends very much on the design you want to achieve. Lets assume that you want to achieve the YouTube style, where you have a thumbnail image and want to overlay a play button image on top. If you want the thumbnail to be an actual <img> tag you will need some extra markup, like this:
<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>
The wrapper <div> is required so you can target the img and span correctly, and have dimensions to contain them in. The span is where the overlay image will go.
.thumb-wrapper {
position:relative;
}
.thumbwrapper span {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: transparent url(overlay.png) no-repeat;
}
(I haven't actually tested this, if its blatently wrong let me know I'll revise it!)
This assumes a couple of things:
Your thumbnails will always be a fixed size and your overlay image matches that
Your overlay image is a semi-transparent PNG
You could also use the opacity: style to achieve #2. Of course, IE6 will rear it's ugly head and you'll need to use a PNG fix for it if going the transparent image route, or a separate opacity filter if using that method. Both of these are undoubtadly answered elsewhere on Stack Overflow or easily google-able.
If you have other requirements it might be possible to do this without the extra markup, as I said it all depends on what you need exactly. Some requirements may not be possible without JavaScript (which would of course mean you could inject any extra markup with that!).
You will find the solution in the following thread on StackOverflow:
How to draw a graphic over another graphic
Shortly (quoting after Ipsquiggle) :
<div style="position:relative">
<div>
<img url="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img url="smallgraphic.png">
</div>
</div>
More details why and how it works in the original thread.
If you have good control over image size, we have used the background to various elements - for example, set the background of a table cell to one image and put an img tab inside the cell.
Taking your example of youtube, you could very easily do this with 2 images and 1 img tag and a little bit of CSS of course ;)
<style>
img.youtube {
width:500px; height:500px;
margin:0; padding:0;
background:transparent url(/point/to/your/larger/image.jpg) no-repeat center
}
</style>
<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" />
How it works is simple, you have the small youtube image as transparent PNG or GIF and then set the background image as the larger image, this will then give the effect of the smaller image being in the center with no extra markup.