I'm trying to create an overlay on an image using <img src="picture">. However, using background-color in CSS does not show since the picture is blocking the background. Is there a way to create a color that overlaps the picture?
I have tried using the picture has background-image:url(picture); but to my understanding, background-image does not dictate the <img> size but if you use <img src="picture">, you're picture size will form the` size. And I need the image to render proportionally to the window.
I need some insight.
I think you want something like this:
This shows a container with a background color with a image over it and image also reflects the color of its background.
Fiddle link : http://jsfiddle.net/4AtGn/
HTML:
<div class="container">
<img class="cont-img" src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
CSS:
.container{
background-color:#090;
width:100%;
}
.cont-img{
opacity:0.8;
width:100%;
}
Image Overlay Techniques:
Using background-image: If you prefer background-image then i would just using :after element and applying opacity to it. DEMO
Using <img> tag: You can use opacity: 0.1; max value 1, this will make your image transparent & you will be able to see the background image. DEMO
HTML
<div class="first-stack">
<img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
<div class="overlay">
</div>
<div class="top-stack">
<img src="http://www.businessinsider.in/photo/37988660/These-Are-11-Wealthiest-Women-In-Tech.jpg"/>
</div>
CSS
.overlay{
position:fixed;
width:100%;
height:100%;
background:#000;
opacity:0.8;
top:0;
left:0;
}
.top-stack {
position:absolute;
top:50%;
left:50%;
margin-left:-339px;
margin-top:-255px;
}
See The Fiddle Link : http://jsfiddle.net/Jyw8S/
Related
I did some search here and tried different codes that was recommended but none seems to work. Sorry if this is a basic question but I'm very new to coding.
I'm trying to centre and fit an image to the browser window. What code do i need to use?
P.S the image isn't my background image. I'm changing the color of the background and want this image on top of the background image.
This is the code i have
<body>
<div id="clock">
<img src="images/clock.png" alt="">
</div>
</body>
What CSS code do i need to use to achieve what I'm trying to do?
The first image is how its showing on the browser (basically can only see part of the image since it's enlarged)
The second image is how I want it to look
Add some styling for that image. Add this to your css file:
#clock img{
width: 100%;
}
#clock{
width:100%;
text-align:center;
}
#clock img{
height:100px;
width:auto;
}
<div id="clock">
<img src="http://pngimg.com/upload/clock_PNG6611.png">
</div>
here you can increase or decrease image height:100px; but make sure width is auto otherwise the aspect ratio of that image will effect
try this may help you
#clock
{
margin:0px auto;
text-align:center;
}
#clock
{
max-width:100%;
}
I want to have an image on my page that has certain parts that are transparent, but not all of it. Is it possible to make just certain parts of an image/div transparent? For example, just a circle in the bottom right corner, or the top right portion?
In this wonderful future world of 2022, you can now use mask-image to achieve this type of effect:
img {
mask-image: linear-gradient(to left, transparent 5%, black);
}
https://codepen.io/reynoldsalec/pen/OJOwZmV
Note that, although mask-image should be supported by all modern browsers, I've noticed that sometimes it needs to be prefixed (ex: -webkit-mask-image).
DEMO
Check this Demo, you can do by adding a span tag and give absolute position add opacity. and also you can increase the opacity.
Hope this is the one you are looking for. :)
html :
<div class="imgWrap">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
<span class="tranparentClass"></span>
</div>
CSS:
.imgWrap img{
width:80%;
height:80%;
position:relative;
border:1px solid #900;
}
.tranparentClass {
opacity:.5;
border:1px solid #f00;
border-radius : 50%;
display:block;
padding:55px;
position:absolute;
top:0;
left:0;
background:#fff;
}
Here is another CSS option. It simulates a transparent area within an image by sharing a fixed background with background-size:cover on both the background and the circle. This technique also creates interesting effects when used for other html elements that can have a background like divs, headers, paragraphs...
JSFiddle
Main CSS
.main-background, .circle-div {
background-image:url(http://i.imgur.com/1aAo20a.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
HTML
<div class="main-background">
<div class="demo-holder">
<img class="img-size" src="http://i.imgur.com/OaE8VAj.jpg" />
<div class="circle-div">Transparent<br />Effect</div>
</div>
</div>
Another suggestion would be to use the inline image as a background on "demo-holder".
I want to make rounded images like this I have searched and googled but I did not find any solutions to make image rounded.I can do images rounded border like this but I dont know how to make the image itself rounded.Please help
Try this, Change radius by adjusting height and width. height and width should be equal and double of the radius you required
HTML :
<div id="round">
</div>
CSS :
#round{
height:100px;
width:100px;
border-radius:50%;
background:green;
overflow:hidden;
}
Fiddle Demo / updated
Check this for responsive circle DEMO
Use border-radius to achieve what you are looking for.
WORKING DEMO
The code:
img{border-radius:50%;}
If you specifically want a white box with a rounded image in it, you simply make a div with the said width & height you want.
Give it a background color and a border of 1px in the same background color.
Then in the div place an image with borderradius of 50% and width and height of 100% to fill the box and you're done.
Try this: http://jsfiddle.net/fWwgD/
<style type="text/css">
body
{
background-color:black;
}
#box
{
width:300px;
height:300px;
background-color:white;
border: 1px solid white;
}
.circle
{
border-radius:50%;
width:100%;
height:100%;
}
</style>
<div id="box">
<img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>
I do not display it as a thumbnail, but can CSS help compress the image of size 1000x1000 into an image of size 500x500?
My CSS for the image looks like this:
.images {
background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}
How do I overwrite this? I do not want to have to generate another image of size 500x500.
You can use CSS3 background-size:
.images{
background:url("image.png") no-repeat scroll;
background-size:500px 500px;
}
But that will resize the image AFTER it has been dowloaded. And the best way is resizing the image with PHP (or similar) BEFORE the user downoads it.
If you can't resize it server-side and you want it to be cross-browser, you could also use
HTML:
<div class="images">
<img class="bg" src="image.png" alt="My image" />
Content
</div>
CSS:
.images{
position:relative;
}
.images>.bg{
height:500px;
width:500px;
position:absolute;
top:0;
left:0;
z-index:-1;
}
(You can set both height and width but only one of them is necessary).
background-size: 500px 500px;
But it's not supported in ie7 and ie8.
If you would display it in an image tag you can set the width and height to the image tag. You can fake a background by absolute positioning the image.
<img width="500" src="..." />
If you are already using the image somewhere else it could be a good idea to reuse and resize it.
Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.
<div id="banner">
<img src="Styles/Banner.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.
Just Like to thank all of you for being so helpful. GC
Live demo
Hey now i think you should want to this
HTML
<div id="banner">
<img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
Css
#banner{
position:relative;
background:green;
padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
top:20px;
left:10px;
background:red;
}
Demo
You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.
If you can use image as background instead of <img> tag using css like following example
#bannerText
{
background: url("Styles/Banner.jpg") no-repeat center center;
width: 123px;
height: 123px;
text-align: center;
}
If you don't want to use Position:
if you want to use <img> then go with "feeela's" ans