i got a wrapper Im trying to fit image in and have a logo go over top of it lower middle Im having trouble coding it... i can get image on top or bottom or into the menu part below the wrapper but i cant seem to work it out
You do it using positioning.
Working example http://jsfiddle.net/UKxK6/
HTML :
<div id="wrapper">
<img class="bg" src="img path" />
<img class="logo" src="logo path" />
</div>
CSS:
wrapper {
position: relative;
}
#wrapper .bg {
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
#wrapper .logo {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}
Demo :
http://jsfiddle.net/pt4rV/
you can also use the float and clear attribute in your CSS may be it will help you. and also use MAX-WIDTH and MAX-height property so you are able to get proper output.
with max-height and max-width property you are able to set maximum height and width and use float:left or right and clear property as per your need to set the image.
Related
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
I'm trying to set images in this style: one on top and other below this.
Actually I do something wrong and in my result images are one under other. Here is jsFiddle.
The second image is hidden by overflow:hidden in slider class.
Question:
Where I make mistake? I'm sure there is easy solution but I lost some time and can't find it.
P.S. If is it possible I'm looking solution with css changes only.
Change the css for your images to simply this:
img{
display:block;
}
that does the trick.
EDIT after comments:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
That staples all your images over each other in the top left corner.
i think your img must
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
I see you already marked an answer, but I already typed this up so here ya go :)
You can simplify your CSS a bit here as well by removing the floats and if you're only using images for your slider (no text beside the images), you can even simplify the HTML by removing the whole .photo div.
Simplified code:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}
http://jsfiddle.net/daCrosby/MP6qN/8/
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I know its easy to stack images on top of one another but I just wondered if this could be achieved but maintaining a fluid image? As soon as I use the position attribute, I have to supply a width. Then the image won't re-size with the browser.
Thanks for any help.
Joe
You could of course use width: 100%;. Also, you wouldn't need to put them inside divs if you just specify display: block; on the img element. You may have to specify max-width, but that depends on your particular application and required browser support.
A width : 100% works with position : absolute if display : block
Your problem is likely that you have only absolutely positionned img in your div, so its dimensions are null (because positioning rules.)
Two way to solve this :
make one img not absolutely positionned. Its dimensions will be be dimensions of the parent div
use a transparent img, with position : relative, with the same dimension than your real imgs : it's quite dirty, but it'll set the parent div dimensions.
These'll work only if your imgs' dimensions are the same. Otherwise, you must use a JS solution.
Make the photos the background on either an empty <img> or <div> with something like this
.container {
position: relative;
height: 400px;
width: 100%;
}
.container > div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div style="background: url('myimage1.jpg');"><!-- nothing --></div>
<div style="background: url('myimage2.jpg');"><!-- nothing --></div>
<div style="background: url('myimage3.jpg');"><!-- nothing --></div>
</div>
#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.
How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.
EDIT:
Check out this link to see what I want. Just in such a way no vertical scroll bar is there.
http://jsfiddle.net/HLqwN/
Using overflow:hidden will clip part of #decoration so that do not work.
<head>
<style>
#wrapper {
width: 900px;
position: relative;
}
#decoration {
position: absolute;
width: 542px;
height: 126px;
top: 0;
left: 660px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="decoration" src="/images/decoration.png" alt="" title="" />
<div id="content">
Some content
</div>
</div>
</body>
You could set overflow: hidden as the other answers are suggesting.
However, a "decoration" image should not be an <img>, it should be a CSS background-image.
Like this:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
See: http://jsfiddle.net/rdSJH/
if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.
#wrapper {
width: 900px;
position: relative;
background: url(background.png) no-repeat 660px 0;
}
[update after your clarification]
OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?
is so try this, fiddle
notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way
You could use overflow: hidden; on your wrapper
You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.
If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.