I have a div that has background that is partly transparent with a watermark. Inside of the div I'm calling an image but I want that image to appear behind the background of the div so I can have the watermarked transparent div background appear over the image. Is that possible? Here's the css that I have that isn't working...
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
z-index:331;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:330;
position:relative;
}
By giving .artist-container a higher z-index, you are placing it higher in the stacking order than the child image, though children always have a higher z-index than their parents.
If you want to give the effect of a watermark, you can:
Make the image the background of the div and place an image watermark inside it.
Position another div within .artist-container absolutely, with the same dimensions as that of the image and with a higher z-index of the image, with the watermark as the background.
I whipped up a small sample using some spans, which won't add any semantic content to your document and will still maintain the semantic meaning of your image.
HTML:
<span class="cover_contain">
<img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
<span class="cover_image"></span>
</span>
CSS:
span.cover_contain {
display: inline-block;
position: relative;
}
span.cover_image {
display: block;
background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
width: 128px;
height: 128px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
jsFiddle Live Preview
make the image as the background-image of the div and the watermark as the img
it's not possible to put a background in front of an image of the image is in that element. You can simply use the main image as background, or:
what you could do
<div class="holder">
<img src=".." class="main_image">
<img src=".." class="watermark">
</div>
.holder {
width:100px;
height:100px;
position:relative;
display:block;
}
.main_image {
position:absolute;
top:0;
left:0;
z-index:0;
}
.watermark {
position:absolute;
top:0;
left:0;
z-index:9;
}
You can use the negative z-index, but in that case you must have the wrapper not to have any z-index. It's one of the features of stacking context.
Here is a demo fiddle: http://dabblet.com/gist/1731538
And the code for you would be something like this:
.artist-container {
background:url(images/artist-back.png);
width:310px;
height:376px;
margin-left:-9px;
position:relative;
}
.artist-container img {
width:300px;
height:300px;
margin-left:5px;
z-index:-1;
position:relative;
}
Related
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I want to implement 3 DIVs inside a container, just like table rows
top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}
Now the question is what is the best approach to have the middle div's height dynamic and keep the structure correct.
Here's what I've done so far: http://jsfiddle.net/pvPSD/4/
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
bottom
</div>
</div>
CSS
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:absolute;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:absolute;
left:0px;
top:14px;
width:175px;
background: red;
}
#n-bottom {
position:absolute;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
This here worked for me
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:relative;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:relative;
left:0px;
width:175px;
background: red;
}
#n-bottom {
position:relative;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
Remember that absolute postitionning removes the element from then normal flow of the page. The way you had it had all the elements placed in absolute postionning. Therefore, they didn't hold their position within the page. Hence, the following elements were bascially looking to be placed at the top. Having the position relative, the location of the element is preserved on the page, and the next one is looking to be place after.
Hope this makes sense.
Just put top and bottom margin to your middle section, add a wrapper with position:relative and top section and bottom section inside the wrapper, with position:absolute and with height equals your margin.
If the top and bottom <div>s are a static height, then you can set the middle <div> to position 0,0 with height 100% and a margin at the top to match the height of the top <div> and a margin at the bottom to match the height of the bottom <div>.
Well it seems to me (I may have understood what you want wrong.) that getting rid of the positioning elements (absolute, top, left, bottom)for the inner div's from your css keeps it looking correct regardless of how big the middle div is. Is there some other reason why you need absolute positioning on those inner elements?
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>