I've got the following situation:
<html>
<head>
<title>
Title
</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#thingy {
position: absolute;
top: 20px;
background-image: url("bg.png");
width: 100%;
height: 4px;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="test.png" alt=""/>
<div id="thingy"> </div>
</div>
</body>
</html>
test.png is the same image, bg.png is a 1x4 background image.
The problem is: The element #thingy is displayed in front of the image, so a line goes right through the image. This should not happen, #thingy should be displayed behind the image. Playing with z-index doesn't do anything...
Any hints?
Thanks,
Jost
EDIT: Some more details:
The goal is to get a header banner (test.png above), which has a horizontal line under it. The line must span the entire width of the header area (thus width: 100%), the banner must remain centered.
Declaring position: relative on the image and giving it a z-index corrects the behavior. See below:
#thingy {
position: absolute;
top: 50px;
background-image: url("bg.png");
width: 100%;
height: 4px;
z-index: 1;
}
#wrapper img {
position: relative;
z-index: 2500;
}
Apply a z-index and set the position to the image:
#wrapper img {
z-index: 100;
position: relative;
}
#thingy {
z-index: 99;
}
for sure "thingy" is displayed in front of the image, because it has the position absolute.
z-index can not help in this case, because the image is positioned static and z-index has no influence to it.
I have no idea what you try to achieve, but when you position the image also absolute, then the z-index will work.
EDIT: To the edits to your question it is now a bit clearer what you want. Why don't you put the background-image you have in the moment in thingy ans background-image of your wrapper? If needed positioned to with background-position. Then you center your image in the Wrapper and you are done. You need the "thingy" div for nothing in your case.
i think you are looking for this;
http://jsfiddle.net/mtariq/xmYpq/
Related
How can I add scrollbars to this image background?
<!DOCTYPE html>
<html>
<head>
<title>VBS</title>
<style>
body {
background-image: url(https://imgur.com/CahbpxJ.jpg);
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The reason I put the image in the background is that I need to put buttons and other elements on top of it. Is there another way to achieve that?
The answer to your original question is:
Why one would ever wants to have a scrollbar for the background? Background is just a background. If it is an important content, then it shouldn't be in the background. Bring it to the front and make it a standard img element or a background for a standard element.
If we convert your comment:
If you add it as an <img> then you cant put buttons etc on top of that image. If you add it as a background, then you can add elements on top of the image
to a question:
How to put buttons and other elements on top of an image?
then the answer would be: There are many ways to do it. One way can be by putting the image inside a div box that is position: relative and then add the button (or any element you want) to the box and make it position: absolute. And then you can add scrolls to the div box. Here is a demo:
.container {
position: relative;
width: 200px;
height: 200px;
overflow: scroll;
}
.container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="container">
<img src="https://imgur.com/CahbpxJ.jpg" />
<button type="button">Click Me</button>
</div>
I would like to place a smaller image with a transparent background in front of a header image in WordPress. The theme I am currently using allows me to set own css styles but I have no clue how to achieve my goal.
Has anybody already worked on this?
Thanks a ton,
Anton
Here is an example how to place an image in front of another image. I placed a PNG of a bee inside a banner image.
HTML
<div id="container">
<img id="banner" src="https://www.mortcap.com/images/sample_report_banner.png">
<img id="bee" src="https://orig00.deviantart.net/672c/f/2014/320/3/1/bee_png_stock_by_karahrobinson_art-d86m7bq.png">
</div>
CSS
#container {
position: relative;
}
#banner {
width: 600px;
}
#bee {
position: absolute;
z-index: 5;
top: 20px;
left: 20px;
width: 100px;
}
When we set position: absolute, that element will always be position relative to the nearest parent with position: relative (or absolute). And then you can refine the position of the absolutely positioned element using top, bottom, left, right css properties.
Play arround with this fiddle
I have a little problem i was hopeing you guys could help with. I have create an empty white box on my frontimage. To do that i have to change the image to absolute. After this, the image is now out of alignment. To make it easier to understand, there are two images i want to show you, so you can see the problem.
Image when it is set to Relative:
Its the water image in top.. here you see that it is perfect align (left and right side) with the aque color boxes under.
Image when it is set to Absolute:
Somehow when i set the image to absolute, it gets bigger in the right side. I have read some earlier post that the parant should be set to relative.. I mean that I already have done that.
Code:
<div class="row">
<div class="col-sm-12 contentpage">
<img id="frontimage" src="~/images/index.jpg" />
<div class="col-lg-4">
<div class="bookingbox">
</div>
</div>
</div>
</div>
Css:
#frontimage{
z-index: 1;
position: absolute;
}
.contentpage {
height: 650px;
background-color: white;
position: absolute;
}
.bookingbox {
background-color: green;
position: absolute;
height: 450px;
width: 300px;
z-index: 2;
position: absolute;
top: 30px;
left: 30px;
}
img {
max-width: 100%;
}
Now it works.. take a look at the picture :D
Of course it's out of alignment!
When you set the image to absolute, it breaks off the flow of the page, and basically creates a new "layer" to be on. You can say it's "absolutely" off the page flow.
When you set the image to absolute, to position it correctly, make the parent of the image relative, then position and resize the image according to the origin of the parent.
Make sure to add another div so it fits inside it! winks
So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.
I'm using bootstrap if that helps
<div class="jumbotron">
<div> I have images and paragraphs inside of me </div>
<div> I have images and paragraphs inside of me </div>
<div class="clearfix"></div>
</div>
I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:
.jumbotron {
position: relative;
height: 100%;
width: 100%;
}
.jumbotron img {
position: absolute;
}
.jumbotron .covering{
position: absolute;
height: 100%;
width: 100%;
background-image: url('http://lorempixel.com/400/200/');
background-size: cover;
}
You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.
I got the following problem. I want to display a map on a site. The map is a background image.
This Code makes the image perfectly responsible.
section#map {
max-width: 960px;
}
div#map-image {
background: url(Map.jpg) top left no-repeat;
background-size: 100%;
padding-top: 41.875%; /* 402px/960px = 0.41875 height/width of map */
}
So far so good!
But now I want to have some sort of location pin on that map, that behaves also responsive. Since I want to animate it I didn't include in the map graphics, so that is of the table.
Is that possible to do?
Using position:relative; doesn't work because the parent element do not have a width/height specified. Margin/Padding didn't work either.
style for the location pin:
span#location
{
background-color: red;
width: 12px;
height: 12px;
border-radius: 6px;
/*position: relative;
top: 86.9%;
left: 52.26%;*/
}
html looks like this:
<section id="map">
<span id="location"></span>
<div id="map-image"></div>
</section>
Any ideas how to pull this off?
add position: relativeto #map the width of the map seems to be 100% of its parent. position:relative for the pin should then work.
Unless you set the map to position:relative, any relative or absolute positioned elements within that <section id="map"> will take its relative position from the <body>
Can't test it because I don't have the map-image, but this seems working:
position: absolute;
jsfiddle