I want to fix an image above the slider, I've used the below code. It gets fixed but the problem is that, if I minimize or resize the browser, the image moves from that position and takes its own place.
CSS:
.imageover{
background:transparent;
bottom: 0;
color: #FFFFFF;
left: 0;
position: absolute;
width: 100%;
z-index: 8;
opacity:1.0!important
}
HTML:
<div class="topbanner" width=1000px>
<div class ="imageover">
<img src="images/greendesign.png" width =350/>
</div>
<div id="sliderFrame">
<div id="slider">
<img src="images/slider1.png"/>
<img src="images/slider2.jpg" />
<img src="images/slider3.jpg" />
<img src="images/slider4.jpg" />
<img src="images/slider5.jpg" />
<img src="images/slider6.jpg" />
</div>
</div>
</div>
Use position: fixed; if this an image that you want fixed on a place on the page, and unaffected by scrolling.
.imageover{
background: none;
bottom: 0;
color: #FFFFFF;
left: 0;
position: fixed;
width: 100%;
z-index: 8;
opacity: 1.0 !important
}
More on the position property here.
Related
I have three images. I want to combine them
I am referring to this link
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20absolute,moves%20along%20with%20page%20scrolling.
I am trying to achieve this three combine images
I tried static and relative position but they did not work
.object-left, .main-image {
position: absolute;
}
.object-right , .main-image{
position: absolute; //here I am using comma but not work
}
.cshtml
.object-left,
.main-image .object-right {
position: absolute;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
<img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
<img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
</div>
<div class="col-md-6" style="margin-top:100px;">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
The problem is that when you use absolute positioning, the objects start at the upper-left corner of the parent (i.e. location 0x0), so all your three images appear on top of each other. All you need to do is tell them where they should be by adding the left property. The first image can stay at left=0, so you don't need to do anything. The second image must start at the width of the first image, left=50px in my example below. The third image must start at the total width of the fist and second image, left=100px in my example below.
Also remember that since you used absolute positioning on all three images and the parent doesn't have any other content, it will collapse. So you need to give it the height of the tallest image.
.object-left {
position: absolute;
}
.main-image {
position: absolute;
left: 50px;
}
.object-right {
position: absolute;
left: 100px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
Note: in the example above, all images are placed at the top of the parent by default. If you want some images to start at a different location, then give it a top property. In the example below, I gave the third image a top=50px property to align it with the bottom of the second image:
.object-left {
position: absolute;
top: 0;
}
.main-image {
position: absolute;
left: 50px;
top: 0;
}
.object-right {
position: absolute;
left: 100px;
top: 50px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
I think this is what you want to do. I would remove the inline style on the object- images and put that in the css. I left the top, left, right on .object- empty so that you can put where you want to place them.
Does this make sense?
.image {
position: relative;
}
.object-left {
position: absolute;
top: ;
left: ;
}
.main-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.object-right {
position: absolute;
top: ;
right: ;
}
<div class="image">
<div class="object-left"></div>
<div class="main-image"></div>
<div class="object-right"></div>
</div>
Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
}
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<div id="description">TEXT HERE</div>
You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.
Details on MDN:
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
#container_display {
position: relative;
height: 60px;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
#container_display .spacer {
visibility: hidden;
position: static;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
<img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
You don't need this:
#container_display img {
position: absolute;
top: 0;
left: 0;
}
You could also add a break between both divs to create space between them, like this:
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<br>
<div id="description">TEXT HERE</div>
I want to display one image over another. It have to be responsive, with cutting image's edges if i resize. (see the pictures. i can't directly embedded images yet, without 10 reputation). How can i do that?
Here's the code:
<div class="content">
<div class="content-item_1">
<img class="img1" src="photo/image1.png" />
text1. text text
</div>
<div class="content-item_2">
<img class="img2" src="photo/image1.png" />
text2. text text
</div>
</div>
Something like this https://jsfiddle.net/5woswyxc/2/
but image 2 have to be slighty over image 1, if it resize.
and when size is reduced - text 1 must move on the top on image 2.
(image1 is moved to bottom)
resized layout
try this:
<body>
<div class="content">
<div class="parent">
<img class="image1" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
<img class="image2" src="http://openclipart.org/image/300px/svg_to_png/4112/Clue_Simple_Clouds.png" />
</div>
</div>
<style>
.parent {
position: relative;
top: 0;
left: 0;
background-color: blue;
width: 450px;
height: 320px;
overflow: hidden;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
}
</style>
</body>
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.
Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
The following example shows how this can be done, please let me know if it is not what you mean: Example.
z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>