We Keep Coding

background opacity of a div without affecting all the children [duplicate]

This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 6 years ago.
I have a div in my html page showing some content dynamically, based on some knockout code. Here it is how it's defined:
<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
<div class="cardPositioning panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: person.Name"></h3>
</div>
<header>
<!--<img width="256" height="256" src="app/Images/horse.jpg">-->
<img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
</header>
<footer>
<!-- $data.firstName-->
<p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
<p class="nameEmployeePos" data-bind="text: person.Role"></p>
<p class="nameEmployeePos" data-bind="text: person.Email"></p>
</footer>
</div>
</section>
in my css file I have the relative:
.background-image {
background-image: url("../Images/blocks.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
}
so, I managed to achieve the blocks.png image appearing as background of my div as I wanted. I want now to modify the opacity of this image, but if I apply some opacity setting in .background-image I affect the whole div instead of only the image. How can I achieve this?

how i did it with my own website was creating a new div and put your div inside it. then change the background-color of the div with background-color:rgba
that is how i did it. but i don't know if it works for you.

Just add class like this
.opacity {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
then you can use this class with your background-image class

6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified

Was my title strong enough?
I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.
Here's my code so far:
<div class="contactus.container">
<div class="contactus.left">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block" >
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.center">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block">
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.right">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block;">
<img align="right" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>
And here's the CSS:
.contactus.container {
width:100%;
text-align:center;
}
.contactus.left {
float:left;
width:100px;
}
.contactus.center {
display: inline-block;
margin:0 auto;
width:100px;
}
.contactus.right {
float:right;
width:100px;
}
.content {
display: inline-block;
vertical-align: top;
Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.

First thing's first, you cannot use . inside your class name, as mentioned by #grammar in the comments (props to #Scot for copying it to an answer). When you make a reference to .contactus.left in your css, it will look for an element with two classes, like class="contactus left". For the divs you have with class names like contactus.left, you could either give them two separate classes, like <div class="contactus left"> or use a separator like an underscore or a hyphen, such as <div class="contactus-left">.
However, correcting that will not solve your problem. As for what you are trying to accomplish, I believe you mean to say that you want 2 groups of 3 (left, center, and right). To accomplish this, you will want each sub-div to have the display: inline-block style instead of just the center div, and to make sure the center div is actually centered on the page, you will want to divide up the width of the container amongst the three inner divs, and assign the appropriate text-align value to each.
See this fiddle.
You can manage the div sizing yourself, just assigning a percentage for the width of each div. Alternatively, there are css frameworks like foundation and bootstrap that help you manage your page layout with a grid system that basically uses percentages and inline-block elements, and provide you with intuitive class names to easily put your content where you want it.

I think you have named and formatted your classes incorrectly.
Try renaming the css classes like this:
.contactus_center {
display: inline-block;
margin:0 auto;
width:100px;
}
and your HTML like this:
<div class="contactus_center">

Image positioning over an included html file

I am trying to pin an image to the top right corner over some included content.
<div class="panel-body helpContent">
<img src="/images/myImage.png" class="beta" />
<jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
</div>
The image is just a small little badge in the corner, about 150px x 150px.
The beta class looks like this:
.beta{
position:absolute;
top:0px;
right:15px;}
Problem is that the image sits on top of the content in some of the HTML files. Not all of them, mind you. But the ones with a really long header at the top.
What I'd like is for the html content to wrap so it doesn't hit it. I could do that if I included the image in every single HTML file but I'd rather just include it once if possible.
Is there a creative solution to this that doesn't require the image on every page?
Thanks for any helpful tips.

Have you tried float right?
<div class="panel-body helpContent">
<img src="/images/myImage.png" class="beta" />
<jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
<div class="clear"> </div>
</div>
.beta {
float:right;
}
.clear {
clear: both;
}

try this
<div class="panel-body helpContent">
<jsp:include page='<%="includes/" + thisFile +".html"%>' flush="true" />
<img src="/images/myImage.png" class="beta" />
</div>
and
.beta{
position:absolute;
top:0px;
z-index: 1000;
right:15px;}

Making an Image a Hyperlink in Nivo Slider

I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}

I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}

If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?

CSS How to use margins with different divs

Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!

You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.