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")
}
Related
I want to add a transparent black overlay over an img tag with some text in it, like in the example screenshot below. Ideally only with HTML and CSS.
I have been searching for hours and can't find anything.
I know this could be easily done if the image is used as a background, but this isn't an option for us (SEO reasons).
That shouldn't be so bad. Would something like this work? First some HTML:
#container {
position: relative;
width: 600px;
height: 400px;
}
#someimg {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
top: 0;
left: 0;
clear: float;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
<html>
<body>
<div id="container">
<img id="someimg" src="https://www.w3schools.com/w3images/fjords.jpg"</img>
<div id="overlay">This is some text in an overlay</div>
</div>
</body>
</html>
Mic.com used the following code:
.article-card-8col__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.9));
background: linear-gradient(to bottom,transparent,rgba(0,0,0,.9));
}
I changed it slightly. You could also use their code with on a sibling div element of the image & the parent having position: relative; or use one like mine.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:after{
content: "";
background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9));
background: linear-gradient(transparent,rgba(0,0,0,.9));
position: absolute;
display: block;
width: 100%;
top: 0;
bottom: 0;
}
<div class="wrapper">
<img src="https://thumbs.mic.com/MTAxZmJlOGIyMSMvYzNOMU1wRTJjMEdyWUZySS1UVjNnMV9LVkZRPS8xMngyNzM6NDk4MHgyODA5LzgwMHg0NTAvZmlsdGVyczpmb3JtYXQoanBlZyk6cXVhbGl0eSg4MCkvaHR0cHM6Ly9zMy5hbWF6b25hd3MuY29tL3BvbGljeW1pYy1pbWFnZXMvanQwY2dmZXZ5aW10aGhqZzBtYXc4cHZxNndrZmdwbmNqNzQzeTB4YmhybWtyOGc0YXYxcHVidWVldzU0OWIwcC5qcGc.jpg" />
</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%;
}
I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
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.