So I want to center an image inside another image (a computer screen), but it seem not to work with the overflow:hidden. I put posiition:absolute on the image inside, but then the other image disappered.
My CSScode:
.desktop-image {
background-image: url("image-1.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.desktop-image img {
width: 20%;
position: relative;
z-index: -999;
left: 40%;
}
My HTML:
<div class="desktop-image">
<img src="image-2.jpg" alt="">
</div>
</div>
set your "computer screen" image as a background of a div
div {
background: url('computer-screen.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Related
I've ran out of hope for this for the past few days,what I'm basically trying to do is to do this:
CSS:
.div1{
/* background-image code */
}
HTML:
<div class="div1">
<!--Image here-->
</div>
Is it even possible to have a background image larger than the image in the div itself?
See the following example to achieve what you are looking for. Basically you can combine a color and an image by using both the background-color and background-image props at the same time. Position and scale the image with background-size and background-position. background-repeat: no-repeat; is important to be able to see the area that is the simple color background.
.div1 {
background-color: blue;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 300px;
}
<div class="div1">
</div>
For two images layered in this way:
.div1 {
background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg);
width: 400px;
height: 300px;
position: relative;
color: white;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
/*to center the text */
display: flex;
align-items: center;
justify-content: center;
}
.div1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: cover;
/*to set this image layer behind the duck one */
z-index: -1;
}
<div class="div1">
Example content text
</div>
you can add width and height in each img and background-image
.div1{
width: 100vw;
height: 500px;
/* background-image code */
}
img {
width : 200px;
height : 200px;
}
<div class="div1">
<img src="code.png" alt="">
<!--Image here-->
</div>
Give the img some padding and put the background image on it.
div {
width: fit-content;
}
img {
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
padding: 30px;
}
<div>
<img src="https://picsum.photos/id/1016/200/300">
</div>
I am trying to incorporate a logo into a HTML page, but I cannot seem to get its height to auto resize to a max-height of 140px. When I do, the logo gets chopped off. See this for this example:
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
<div class="partner-logo">
</div>
How can I make sure that this logo can have 100% width but only a max height of 140px?
Please try applying background-size: contain property to your css. background-size: contain scales the image as large as possible without cropping or stretching the image.
For more about background-size property see mdn
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="partner-logo">
</div>
This css code makes sure your background is always centered and always fit the size you give your div without it getting "chopped off":
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-position: center;
background-size: contain;
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
Try this, and you can resize the image. Just increase or decrease the padding value.
thanks and hope this help you.
.partner-logo {
z-index: 1;
padding: 20px;
margin-top: 20%;
max-height: 140px;
border: 1px solid #000;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
}
<div class="partner-logo"></div>
I have a image with the size of 320 * 436 and some particular text data. I need to implement the webpage with the background image as stretch and fit to the screen and the text over the screen. Please help me to implement this using HTML and CSS. Below I have mentioned the code that I have tried. But it does not works:
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<html>
<head>
</head>
<body>
<div class="container">
<img src="background.png">
<p>Data</p>
</div>
</body>
</html>
Thanks in advance
You can achieve this by setting your image as a CSS background image with background size set to cover.
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
This will stretch your image to cover the screen, you can then position your text over it.
body {
background: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center fixed;
}
I have an image that I am using inside a Div.
I was wondering how I could center the image both vertically and horizontally at all times.
At the moment, when I stretch it, it seems to be stretching from the top left corner, is there a way I could have it centered at all times.
I have searched the web and tried various things but can not seem to get it to work.
this is my html:
<div class="container"></div>
here is my css:
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Any help or advice is appreciated, thank you in advance.
EDIT you can see that when I stretch the browser, it
seems to be stretching from the left, i want to be able to have the
Image centered so it stretches from all sides equally*
I got the solution..!
Here is your html file :
<div class="container"></div>
CSS file :
.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}
Here is working demo
background-position: center will align your image in vertical and horizontal center.
Check below snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:auto;
}
<div class="container"></div>
HTML :
<div class="container"></div>
CSS :
.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}
I have a background image that adapts to the screen height and is on full width. Problem is, when I resize my width, the image stretches instead of fill. Also, the content that should be below it overlays the image totally.
This is my code so far.
HTML:
<div id="bg">
<img src="http://placehold.it/2560x1000" class="img" alt="" />
</div>
<div id="content">
<!-- some content -->
</div>
CSS:
#bg {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.img {
background-position: center center;
background-size: contain;
height: 100%;
width: 100%;
position: relative;
}
And here's a fiddle for it: http://jsfiddle.net/anm5sqft/
You use "background-position" and "background-size" but you doesn't have a background, because your image is not a background, it's an image.
Try this :
HTML
<div id="bg">
</div>
CSS
#bg {
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("http://placehold.it/2560x1000");
}
body{
margin: 0;
}
Example with JSFiddle
.bg-section {
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
height:100vh;
}
<div class="bg-section" style="background-image:url(http://placehold.it/2560x1000)"></div>
http://jsfiddle.net/1wurw0zu/