I'm sending some HTML formatted mails where I'm showing property images with their current statuses. There are some triangular status images overlapping to main property images which are getting distorted as MARGIN style property is not allowed in Gmail. Style properties like PADDING and POSITION are also not working. This mail is formatted in table based HTML.
I just want to place status tag images on to right bottom corner of the property images. Kindly help with some alternate solutions.
You can't overlap foreground images, and you can't use multiple background images.
What you can do is use background images, with foreground images overlapping them.
The other alternative is to use one image, and replace the image on the back end as the status changes. If this happens a lot, you could generate them dynamically.
Related
I am having frustrations over background image, and thus stuck.
How to put different background images into 2 or more different sections of the webpage? Will putting the background image in the body in my html file be applied to the whole webpage? Or should I insert the background image respectively inside the selected container? Please try to be direct and simple as possible using examples if you can, please.
I tried to put the background in its container but when I see at other exemples I notice most of people put a 1st background in the body and then later in the code inside a container put 2nd background but that confuses me. Does that mean that the 2nd or the 3rd background inside their own respective containers overflow the 1st background set in the body (because I understand an image put in the body is for the whole webpage and thus all sections).
I want to align this image in this way. I am making an HTML email signature. I know I can do this with margin negative or position relative but I am using the table and their child tags here and I don't want to use margin padding position properties as these properties do not support by many email platforms like outlook.
So, all I need is to align the image in this way by using table tags and their properties.
Thanks.
Not possible as individual elements.
You're relying on a background image plus margin or padding to push the image down into place. This isn't just html email you're building that will be received once, you're building html that is effectively being forwarded and code will be stripped depending on the system you import the signature into as well as any email client cleansing the signature when receiving the signature.
Your only option is to have the white/yellow background, photo and text on the pink tab as one image.
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
I'm trying to create a header for my website but I'm having a bit of difficulty as I'm new to HTML and CSS. I want to create a banner with the same font and background as shown below. They consist of a certain colour with a pattern overlay at 44% opacity, which I'm not sure how to do.
I originally uploaded the header as an image, but I was told it's bad to use large images on websites as it make it longer to load. So I tried creating it via code. If anybody could please help replicate the header below, I'd greatly appreciate it. Thanks.
Link to my current HTML & CSS Code via Fiddle
Link to Banner I want to replicate
Here you have your fiddle updated: FIDDLE
I've fixed a few things in the html like tags not closed (your headers) and now the "container" contains the banner propely.
So now you just have to add a background image with the pattern you want and (as you did) play with the opacity value of your text.
#container {
background-image:url(http://zimasolutions.com/Images/pattern.png);
repeat:repeat;
}
Use the repeat option for the background image so you just need a little image.
I uploaded temporally the image pattern.png I have used as an example. I took the sample for the image you linked. In a few hours I may delete that image.
Edited: IF you want the pattern image OVER the text insteed of under it may be more complicated. You could absolute position a container over the banner but in this case you may need to change the image opacity with an image editor (like photoshop).
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...