Adding a background-image on an <img> itself? - html

Is it possible to add a background-image on an <img> tag? I cannot create a <div> around it for now (due to other restraints). I'm wondering if it's possible on just the <img> tag. Thanks.
img {
width: 500px;
background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png');
background-repeat: no-repeat;
z-index:100;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Use padding and add the image there:
img {
width: 300px;
padding:0 0 50px 0;
background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px;
background-repeat: no-repeat;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">
Like below by considering multiple backgrounds and by keeping only the padding area:
img {
width: 0;
height:0;
padding:300px 500px 0 0;
background:
url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px,
url(https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg) center/cover;
background-repeat: no-repeat;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Yes, this is possible - but the img would need some transparency for you to see the background image of course.
This snippet is the same as yours but with the actual img src removed and a width and height put on the img element so it has some dimensions, since it isn't in this case picking them up from the img itself. You can see the StackOverflow logo emerging from underneath.
img {
width: 500px;
background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png');
background-repeat: no-repeat;
z-index:100;
}
<img src="" width=200 height=200>

Related

How to make img behave the same as background-image?

I use an image as a background image, background-image: url(), and I also use this image placed inside <img src="">
It looks like the height of src image is shorter the height of the background image.
If I set a height for src image equals height of the background image, the src image will be disturbed.
What CSS properties should I set to make src image have the same height as background image, but it won't disturb the src image? Please note: I need to adjust ONLY in src image, not background image.
Please take a look at my sample in jsfiddle
HTML
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
CSS
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
/* height: 353px; */
}
Please note: Because the image I use is long, I have to set width: 100% for img. If I don't set that, a navigation bar will show at the bottom of the browser.
Consider object-fit and object-position
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
height: 353px;
object-fit:cover;
object-position:center;
display:block; /*to make it behave as div and avoir whitespace issue*/
}
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
Related for more details: Object-fit On A Canvas Element
Add position:fixed in CSS class. Then you can adjust the height.
.imageBG {
background-image: url("https://library.danahall.org/wp-
content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
position:fixed;
}
img {
width: 100%;
height: 353px;
}
Just add a class to the img containing div and set its height to 353px.
.image-container {
height: 353px;
}
img {
height: 100%;
width: 100%
}
As i see you src image is right and what you background image is doing is scaling the image to make it fit 100% and also your 353px, so your src image height was'nt wrong, it was the backgorund
if you use math and right proportions you would get this:
height: 252px; // this is the right proportions
right math one

<p> tag always under background in <div>

So basically I want my p tag to always be displayed under my background image. If I make my window smaller, the p tag should not overlap the background-image.
I know adding it in the source code as a img in a separate div would help a lot, but an answer for this would be nice.
HTML:
<div class="champ-link img-background">
<a>
<p>browse the selection</p>
</a>
</div>
CSS:
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
}
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
padding-top: 63px;
}
or
p {
margin-top: 63px;
}
Just took the p tag out of the div to allow the p tag positioning.
<div class="champ-link img-background">
</div>
<a><p>browse the selection</p></a>
css:
img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
height: 10%;
background-position: center;
}
never overlaps the div.
Here is an alternative approach negating the need for padding or margin to "make space" for the image size, for instance if you want to scale your image size to your screen size
<div class="champ-link">
<div class='img-background'>
</div>
<a><p>browse the selection</p></a>
</div>
CSS
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 100%; /* or cover or contain etc. */
display: block;
margin:auto; /* can add optional margin for top bottom too
so image doesn't "touch" anchor below it */
width: 50px; /* or whatever you want/need */
height: 63px; /* or whatever you want/need */
}

CSS Background position pushes content up when screen is small

I have the following code:
<div class='row front-page-img' style="background-image:url('http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg')">
</div>
<div>Below image</div>
.front-page-img {
background-size: 100%;
width: 100%;
height:400px;
margin: 0;
opacity: 0.4;
background-position: 0px -200px;
background-repeat: no-repeat;
}
I am happy with what I am seeing. That is, I like the portion the of image that I currently have. The two things that I don't like are that are the following:
When I make the screen smaller the img gets pushed up and disappears as the screen gets small. I want it to always have the same section of the image, but just scaled down.
For some reason there is white space below the image that is now allowing other elements to follow the image.
Anyone know what I am doing wrong and how i could fix this? Later, I would like put an input tab over this image incase that changes the approach. Thanks!
jsFiddle
Just use Bootstraps img-responsive class with an inline image. If you do not want the upper part of the image to be shown, just crop the image.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
.front-page-img {
opacity: .4;
}
.front-page-img > img {
width: 100%;
}
<div class="front-page-img">
<img class="img-responsive" src="http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg" />
</div>
<div>Below image</div>
You can try this:-
.front-page-img {
background-size:cover;
height:400px;
opacity: 0.4;
background-position: 0px -200px;
background-repeat: no-repeat;
}
This works better for what you want.
background-position: center bottom;
Update your CSS to the following.
.front-page-img {
background-size: 100%;
width: 100%;
height:0;
padding-bottom:40%;
margin: 0;
opacity: 0.4;
/* background-position: 0px -200px; */
background-repeat: no-repeat;
}
By setting the height to 0, we can use padding-bottom to maintain a fixed ratio as when you use percentage based padding it is relevant to the element width.

Fit background image to border HTML/CSS

I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/

Percentage width and height hides background image

Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/