I know this is a bit weird question. but quite curious about this. Can we make background property work like an overlay? without using any extra html tag.
E.g,
<img style="background: url('some image url to be overlayed on the actual image')" src="image src which will be hidden under the background image" alt="">
Is it possible?
Do you mean something like this? I used padding for the size.
img {
padding-bottom: 35%;
width: 500px;
background: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png);
height: 0;
}
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="" title="test">
You can do that, but you would have to pad your overlay image to reveal its background:
#img{
height: 20; // Front image height
width: 20; // Front image width
padding: 50px 80px; // needs to be adjusted depend on your BG img size
background-image: url('path_to_image');
background-repeat: no-repeat;
}
Related
I have an image that contains multiple images with x and y offsets
Is it possible to use this offsets and then shrink the image to a different width and height ?
Here is a sample of the image i get and the desired output
Thanks in advance
.container {
width: 960px;
}
.full {
background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') no-repeat;
width: 100%;
height: 200px;
}
.img-container {
width: 40px;
height: 40px
}
.shrinked {
background: url('http://ddragon.leagueoflegends.com/cdn/8.5.2/img/sprite/champion1.png') -48px -48px no-repeat;
height: 100%;
width: 100%;
}
<div class="container">
full image
<div class="full"></div>
40px centered
<div class="img-container">
<div class="shrinked"></div>
</div>
</div>
You should be able to achieve this using the background-size property and using background-position as percentage values.
For example, if the actual size of the thumbnail of the character is 50x50 and you want to get it down to 40x40, you can set the background-size property as 80% of the dimensions of the image.
Considering the your image size is 480x144, your background-size would be 384x115.2.
Also, while using percentage values for background-position make sure you
are clear with the way it works. This should help you with that.
Here is an updated version of your fiddle.
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
I have 2 images - one is the main image and the other is like a picture frame that I'd like to position over the top of the main image.
The picture frame image is a png with a transparent center so the main image shows through.
The dimensions of the images are important - the inner main image has to be smaller than the frame so it is only visible through the center:
main.jpg = 367 x 550
frame.png = 405 x 597
I thought I had it with the following code...
<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>
...which works great until you see the screen on a mobile phone; the frame.png stretches because I've given the width as 100% but the background main.jpg doesn't stretch along with it.
I need the design to be fluid, so I need the images to stretch.
Is there a way to make sure the background stretches the same as the main image?
I've tried all kinds of different methods to get this working, absolutely positioning the frame in a div floating over the main image, etc but I couldn't get the main image to appear centered horizontally and vertically when I did that.
Is there any way to achieve what I want without resorting to javascript?
The reason I'm using 2 images by the way is because of file size. I need the main image to be jpg so I can keep it small, but I also need the transparency on the frame so that has to be png :(
I usually use this:
HTML:
<div id="frame">
<img id="myImg" src="main.jpg">
</div>
CSS:
#frame {
position: relative;
width: 597px;
height: 405px;
background-image: url(frame.png);
background-position: center;
background-size: cover; }
#myImg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
margin: auto; }
This works for all images and other elements with fixed dimensions, or a set max-width and max-height.
I hope this works for you :)
I've created a fiddle for you.
http://jsfiddle.net/avrahamcool/4VQzP/
in my fiddle, the frame is just a black background, and the img is just a red background. as you can see, no need for transparent frame (because the img is above it)
instead of centering the frame above the img, I'm centering the img above the frame.
(if I understood correctly, this also serves your purpose)
HTML:
<div id="Frame">
<span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>
CSS:
#Frame
{
width: 405px;
height: 597px;
background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
text-align: center;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
#Frame > img
{
vertical-align: middle;
}
I generally use another image absolute positioned as background. like:
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" />
<!-- Then do the positioning with classes -->
</div>
Give it a shot, hope it works as you want
If you set the image as absolute; it is going to lift out of it's container.
Floating may do the same.
What about z-index:1; and x-index:2; with margin:auto; ?
I have an image set as a background image of a div. The DIV size is changing and inside their is the image which is a gradient.
CSS:
#scroller_shadow{
background-image:url(../img/ui/shadow.png);
background-repeat:repeat-x;
background-position:top;
}
I need a cross-browser solution for making the image fit the height of the div in the y-axis only, keeping the repeat-x. The DIV is being resized dynamically via JQuery.
Their might be a cross-browser option using JQuery. I don't mind using scripts to achieve that in order to get cross-browser support (IE7+). I don't want to stretch the image because it loses the intensity when you stretch the image on the x-axis, making a semi-transparent png image almost transparent.
Thanks.
I had this problem too. It's easy in most browsers, but IE8 and below it's tricky.
Solution for modern (anything not IE8 and below) browsers:
#scroller_shadow {
background: url(../img/ui/shadow.png) center repeat-x;
background-size: auto 100%;
}
There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn't work if you want it to repeat.
Anyways thus begins my terrible hack:
<div id="scroller_shadow">
<div id="scroller_shadow_tile">
<img src="./img/ui/shadow.png" alt="" >
<img src="./img/ui/shadow.png" alt="" >
<img src="./img/ui/shadow.png" alt="" >
...
<img src="./img/ui/shadow.png" alt="" >
</div>
</div>
Make sure to include enough <img>'s to cover the area needed.
CSS:
#scroller_shadow {
width: 500px; /* whatever your width is */
height: 100px; /* whatever your height is */
overflow: hidden;
}
#scroller_shadow_tile {
/* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
width: 9999px;
height: 100%;
}
#scroller_shadow_tile img {
height: 100%;
float: left;
width: auto;
}
Anyways, the idea is to create the stretch effect from the images.
JSFiddle.
background-position: left top;
background-repeat-y: repeat;
background-size: 100%;
I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.