Would like to apply a background-color to a div that's nested inside a footer. The footer has a background-image covering the entire footer I set in CSS. The background-color of the div containing the imgshould reach the bottom of the footer's bakground-img. Here's an illustration of what I mean:
My code looks like this:
<footer>
<div class="some class">
<img src="img/some-image.png" alt=" ">
<div class="some class"> other content </div>
</div>
<div class="bottom-footer"> </div>
</footer>
CSS:
footer {
background-image: url('../img/footer.jpg');
background-repeat: no-repeat;
background-size: 100%;
height: 400px;
width: 100%;
}
.some.class {
width: 300px;
height: 365px;
margin-left: 2%;
background-color: (0,0,0,.97);
z-index: 1;
}
div.some img {
width: 260px;
height: 130px;
margin-top: 30px;
}
The img shows but i cannot see the background-color of the div that has the img. Probably a simple fix but I can't seem to figure it out. Any help would be appreciated.
You need to include rgba.
background-color: rgba(0,0,0,.97);
Related
Is this a Chrome bug?
Here's the HTML:
<div><img src="test.png"></div>
Here's the CSS:
* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }
Expected result: The img should have a height of 65px.
Result in Chrome (v. 27.0.1453.116) on Mac OS (v. 10.6.8): The img has height of 135px and "bleeds" into the parent div's padding. If I change the padding of the div to 50px 0, oddly it renders properly.
Play with this in a codepen: http://codepen.io/anon/pen/jhbKz
Screenshots:
First block has padding of 50px 0. Second block has padding of 75px 0 60px.
Firefox (correct result)
Chrome (wrong?)
Try adding a container to your Image with width and height of 100%. This will give you the same output on chrome and FF.
<div class="b">
<div style='height:100%;width:100%;'>
<img src="some image url">
</div>
</div>
I cannot explain why this fix works currently, but I myself am trying to reason with it.
Years later, the issue seems to have spread to Firefox.
Pav's workaround did not work for me, maybe because I have "a" not "div". The only way in my case was to display as table:
<div style="display: table;">
<a style="height: 100px; display: table-cell;" href="#">
<img style="max-height: 100%; width: auto;" src="some image url">
</a></div>
An additional benefit of "table" is that vertical-align: middle; can be used to center the image (or other content) vertically.
You can achieve it using position: absolute for your image.
<div class="wrap">
<img class="img" src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg" alt="">
</div>
body {
height: 100vh;
}
.wrap {
display: inline-block;
position: relative;
max-height: 500px;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.1);
}
.img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
jsfiddle
For some reason when I add a width and height to .left-section, .section-page-layout-container doesn't expand and show the background, but if I add a height to .section-page-layout-container the background gradient repeats perfectly and every pixel is filled.
I tried messing around with the code but nothing seemed to work. Must be another stupid mistake.
Hopfully you good folks can help me out :)
Thanks in Advance!
My HTML
<section class="section-page-layout-container">
<div class="section-page-layout">
<div class="left-section">
<header>
</header>
</div>
<div class="right-module-section">
</div>
</div>
</section>
<div class="clear"></div>
My CSS
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
}
.section-page-layout {
width: 1280px;
position: relative;
margin: 0 auto;
height: auto;
}
.left-section {
width: 585px;
height: 500px;
background: #000000;
float: left;
}
Use overflow: hidden
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
overflow: hidden;
}
When you have floated object inside an object the container collaps, thats why u need a clearfix
OK, so what I would like to have happen is what I've set as a background image to display on top of all other elements on the page - set on the right, half on the Content block, half off to the side... currently I have the structure of:
<div id="SideImage">
<div id="Contain">
<div id="Dash"></div>
<div id="content">
<h1>Heading 1</h1>
<p>Content</p>
</div>
<div id="Footer">
<p>Footer Content</p>
</div>
</div>
</div>
CSS looks like the following, z-index isn't working when I use FireBug, If I remove the background color from the Contain css I can see the full image, but I want that SideImage OVER the Contain background, Dash background and footer. The only other thing I can think of is setting a Div above the SideImage Div with a white background color that is only a specific width, and removing the background color from the Contain Div. Any ideas?
#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}
#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}
#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}
#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}
JSFiddle of code above
Z-index can be a fickle mistress. I usually resort to content rendering order for something like this. Based on the above markup and what you have in mind, I'm leaning toward agreeing that it's not possible to have the background of the containing #SideImage be "on top" of any of its contents. See the diagram in that Smashing link for more information.
If you added the element <div id="SideFill" class="ir"></div> you could make the changes to your css:
#SideImage {
width:100%;
position:relative;
}
#SideFill {
position:absolute;
width:15%;
height:100%;
top:0;
right:0;
background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}
OK this is where I finally ended up for the HTML on the page.
<div id="Contain">
<div id="SideImage" class="ir"> </div>
</div>
For the CSS I ended at
#SideImage {
background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent;
height: 100%;
left: 748px;
position: absolute;
top: 0;
width: 100%;
z-index: 30;
}
The background-image property of css is used to put an image at the background of an element. To put an image in the content or to elevate image over content use <img> tag.
You realize you want the background image, which is supposed to be in the BACK, to be in front, right? There's no way of doing it normally in CSS.
You'll need to have an <img> element with the image you want, and have it fixed/absolutely positioned with a high z-index.
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I want to build CSS popup (or block) from three elements (top, middle, bottom).
I have always do it in simple way but there was no text area above the top/bottom part.
Now i have to build a custom background but don't have any idea how. Height of popup (block) should be dependent of content.
Is it possible to do without any JS hacks?
Slice it into nested boxes etc.
What i've tried is to create a container first, the a div for the arrow, then the content (with your background gradient) and a wrapper for the content (with the red background) and the content inside.
HTML
<div class="popup">
<div class="arrow"></div>
<div class="content">
<div class="wrapper">
<div class="top">Content top</div>
<div class="red-area">Your main content</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Now you've a nice html basis, with which you can play with floating, padding, margin, background-colors and rounded corners, like this:
CSS
* { margin: 0; padding: 0 }
body { background: #eee; padding: 50px; }
/* .popup { width: 250px; } */ /* If you wanto to manually set a width for the whole popup */
.arrow {
float: left;
width: 25px;
height: 50px;
margin-top: 10px;
background: white; /* your arrow image here */
position: relative;
}
.content {
margin-left: 25px;
background: white;
background: white url("your/gradient-image.jpg") repeat-x center bottom;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
.wrapper {
padding: 15px;
background: #ff7f7f;
}
I've floated the arrow to the left, left margin for the content and paddings for the wrapper.
It depends on border-radius and box-shadow which are supported in newer browsers.
If you like to support older browsers, then i recommend you to use more images for the visual effects.
Hope this helps. jsFiddle example
Try this:
-Divide the layout in 3 divs: top/bottom, with a fixed height and the top/bottom image as a background; and middle, using the middle image and repeating the background. Something like:
<!--Container-->
<div class="popup-container">
<!--Top part-->
<div class="top" style="height: 20px; background-image: url(top.jpg);"></div>
<!--Now the middle div with the background repeating only vertically-->
<div class="middle" style="height: auto; background-image: url(middle.jpg);
background-repeat: repeat-y;"></div>
<!--Bottom part-->
<div class="bottom" style="height: 20px; background-image: url(bottom.jpg);"></div>
</div>
Take a look on ColorBox it's so easy to use and u can customize it's css to do whatever you want.
you also able to define the popup content as a content from another page like that:
$.colorbox({href:"simplepage.html"});
Now the popup width will fit to whatever your page have....
it's apowerful tool try it.
I have found simple way to do it!
First create related block, inside content and three absolute blocks. Each of color don't overlaps other! Look at the example:
HTML:
<div class="popup-container">
<div class="content">
test 1<br />
test 2<br />
test 3<br />
test 4<br />
test 5<br />
test 6<br />
</div>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
CSS:
.popup-container {
position: relative;
}
.content {
z-index: 9999;
}
.top {
position: absolute;
width: 100%;
height: 20px;
background-color: red;
top: 0;
z-index: -1;
opacity: 0.5;
}
.middle {
position: absolute;
width: 100%;
background-color: yellow;
bottom: 40px;
top: 20px; /* height of top */
z-index: -1;
opacity: 0.5;
}
.bottom {
position: absolute;
width: 100%;
height: 40px;
background-color: blue;
bottom: 0;
z-index: -1;
opacity: 0.5;
}
http://jsfiddle.net/bhnuh/5/