Right now i have an image within a div like so :
<section class="col-md-12">
<img src="imagepath/image.jpg"/>
</div>
I can use object-fit:cover; for firefox , chrome and the other usefull browsers but this won't work for IE. is there a workaround to make the images look the same as they would look with object-fit:cover;?
ps. i am unable to make the image the background of the parent.
Use it to html
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
use it to css
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Related
I'm trying to add a Logo on top of an Image. I tried to overlap these two images but it did work for me.
The second image was placed next to the first image instead. Please help me sort this thing out
This is for a website I'm trying to work on using HTML and CSS.
HTML file:
<section id="home">
<div class="backgroung" >
<img src="Images/banner1.jpg" style="width: 100%" class="bg">
<img src="Images/yellow.png" class="logo">
</div>
</section>
CSS file:
#home{
position: relative;
top: 0;
bottom: 0;
}
.bg {
position: relative;
top: 0;
bottom: 0;
z-index: 1;
}
.logo{
position: absolute;
top: 20px;
bottom: 30px;
height: 250px;
width: auto;
z-index: 2;
}
I expected this to be overlapping with each other.
I hope it's not because both images are not of the same file types.
You should also set the left property of the logo:
.background {
display: inline-block;
position: relative;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
<section id="home">
<div class="background">
<img src="https://picsum.photos/id/583/300/300" class="bg">
<img src="https://picsum.photos/id/237/100/100" class="logo">
</div>
</section>
You can also use multiple background images:
.background {
width: 300px;
height: 300px;
background:
url(https://picsum.photos/id/237/100/100) no-repeat center,
url(https://picsum.photos/id/583/300/300);
}
<section id="home">
<div class="background">
</div>
</section>
here's the code I'm using. I want to set a header with an image background, but when I set the body background, it dissapear :S. What I'm doing wrong?
<body>
<div id="bg">
<img src="img/bodyBackground.png">
</div>
<header>
<div class="container">
<h1>Bienvenidos a JVasconcelos.me</h1>
</div>
</header>
</body>
This is just the HTML code, here's the CSS I'm using:
#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; }
#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }
This answer is for if you want to keep your markup the way it is.
It's because the header is hidden behind the background. You'll want to set z-index. So add z-index: 0; to your #bg. Then add the following styles to your header:
position: relative;
z-index: 1;
Add background image to body with css and it will show up.
You can then set a new background image with css by header { background: url(x) no-repeat; }
#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; }
body {
background: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg') no-repeat;
}
#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }
header { background: url('http://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/hubble_friday_03042016.jpg?itok=j1kZCJ51') no-repeat; }
<body>
<header>
<div class="container">
<h1>Bienvenidos a JVasconcelos.me</h1>
</div>
</header>
</body>
instead of manually adjusting your img to be a backgroud for your header, why don't you use this tag to set a background image?
header{
background-image: url("img/bodyBackground.png")
}
I got a task where I have to rewrite an old Adobe Flex application in HTML, CSS, JavaScript.
It is an application for customers to demonstrate our product with several images (images on images, so let's say we have png files for background, house and stickfigures) and the images change based on interaction with the user.
For my example let's just have a background and two stickfigures.
The background should always take 100% of the width. As we resize the browser the stickfigures should stay always at the same place on the background.
At my first try
<style>
.container { position: relative; width: 100%; }
.my-background { position: absolute; left: 0; top: 0; width: 100%;}
.stickfigures { position: absolute; z-index: 10; }
.jane { left: 35%; top:25%; width: 40%; }
.james { left: 55%; top:55%; width: 15%; }
</style>
<div class="container">
<img src="background.png" class="my-background">
<img src="stickfig1.png" class="stickfigures jane">
<img src="stickfig2.png" class="stickfigures james">
</div>
Trying this way the top: xx%; doesn't seem to work, so I googled a bit and added height: 512px; to my container class. After that the 'top' worked, but as I resize the web browser the stickfigures move around on the background.
<style>
.container { position: relative; width: 100%; height: 512px,}
.my-background { position: absolute; left: 0; top: 0; width: 100%;}
.stickfigures { position: absolute; z-index: 10; }
.jane { left: 35%; top:25%; width: 40%; }
.james { left: 55%; top:55%; width: 15%; }
</style>
<div class="container">
<img src="background.png" class="my-background">
<img src="stickfig1.png" class="stickfigures jane">
<img src="stickfig2.png" class="stickfigures james">
</div>
Any help, clue, idea is really appreciated, please ask if something is not clear.
I made some changes in your exemple :
HTML
<div class="container">
<img src="background.png" class="my-background">
<img src="stickfig1.png" class="stickfigures jane">
<img src="stickfig2.png" class="stickfigures james">
</div>
CSS
.container {
position: relative;
width: 100%;
height: auto;
}
.my-background {
position: relative;
left: 0;
top: 0;
width: 100%;
height:auto
}
.stickfigures {
position: absolute;
z-index: 10;
}
.jane {
left: 5%;
top:20%;
width: 20%;
}
.james {
left: 60%;
top:50%;
width: 15%;
}
Please see the demo : JSFiddle
I am using this code. It covers the whole background with 1 image. The problem is the upper part of it, which gets cut by browser and the lower part by the taskbar. As i go fullscreen it works fine. I want the image to sit in the browser fully. Is there any method available for that??
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
You can change your current CSS to:
#bg {
position: fixed;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
/* display: cover; */
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Here is example 1.
Alternatively, load the image purely with CSS and set it as background. Change your code to:
HTML
<div id="bg">
</div>
CSS
#bg {
position: fixed;
width: 100%;
height: 100%;
background: url(images/bg.jpg);
top: 0;
left: 0;
}
Here is example 2.
Both of them will set the image as background.
Change 1
Remove the
top: -50%;
left: -50%;
on your code. It makes the hiding of both you mentioned.
Change 2
You need to declare the image width and height in the
#bg img{
width:100%;
height:100%;
}
I have a problem with my website. I want a picture to be in the background and text in the foreground. My code is:
<body>
<a id="Head">Gute <a id="Head2">Server</a></a>
<div id="bg">
<img src="bg.jpg" alt="">
</div>
and CSS:
#Head {
font-size: 500px;
color: #00DFFC;
}
#Head2 {
font-size: 500px;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
When I use this code the background is in the foreground and the text is invisible.
Remove the line
<img src="bg.jpg" alt="">
Instead add in your style class
body{
background : url('bg.jpg');
}
Use z-indexes
#Head {position: relative; z-index: 2;}
#bg {z-index: 1}
Than, <a> in another <a> isn't valid HTML, use only one link (eg. with span), or gute server.