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.
Related
This question already has answers here:
How to overlay images
(11 answers)
Closed 2 years ago.
I'm trying to create an opaque div with a slight colour over an image.
I can't seem to get it to fit exactly over the whole image. I've tried so many different variations and the following is the best I can come up with.
I know it's probably something simple but I think I need some help lol.
.old{
position: relative;
}
.cover{
background-color: blue;
width: 100%;
height: 200vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
}
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
You don't need to use img use just background color .
https://jsfiddle.net/hu3wfc76/
<div class ="cover">
<div >
</div>
</div>
.cover{
background-color: blue;
background:url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg) no-repeat;
background-size:cover;
width: 100%;
height: 200vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
--filter:blur(10px);
}
.cover div{
background:blue;
width:100%;
opacity:0.5;
height:100%;
}
You should wrap cover div and image with another div and set its position to be relative. Then you should set the height and the width of the image to 100% to fulfill the wrapper div and also you should set the cover div position to be absolute and expand it all over the wrapper div.
If you want to set custom height and width to the image, you should set those properties to wrapper div.
.old{
height: 100%;
width: 100%;
}
.cover{
background-color: blue;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0.5;
}
.wrapper {
position: relative;
}
<div class='wrapper'>
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg">
</div>
I think this is what you want, basically I added a container for both the image and the div and forced the div position to be relative to container <div>
body {
margin: 0;
}
.container {
position: relative;
}
.cover {
background-color: blue;
width: 100%;
height: 99%;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
<div class="container">
<div class ="cover">
</div>
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>
You can use pseudo elements with a background as an alternative to another element if you don't need an alt text on that image.
<div class="cover"></div>
.cover {
background-color: rgba(0, 0, 255, 0.5);
width: 100%;
height: 200vh;
position: relative;
}
.cover::after {
content: ' ';
background-image: url('https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
background-size: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
https://codepen.io/koralarts/pen/RwPBWVd
Just a simple way to give overlay a whole image. wrap the image within a div and do with CSS pseudo selector. just like below
.cover{
position:relative;
width: 100%;
height: 100%;
}
.cover::before{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,255,0.5);
content:'';
z-index:2
}
<div class ="cover">
<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>
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%;
}
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%;
}