I am using bootstrap along with HTML5 to develop a website.
I have a website header.
I wish to have an image in the website header with some opacity value and also some text in it.
I have referred this link setting opacity for background image and tried implementing it. I have got the text but not the image.
Here is the code:
HTML:
<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>
CSS:
.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}
.head .hbg
{
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
z-index: -1;
}
What is the issue here?
.head .bg doesnt exist in the code above. Change to .hbg.
How about this instead?
<div class="page-header head">
Hi there
</div>
-
.head{
width: 300px;
height: 250px;
display: block;
position: relative;
}
.head::after {
content: "";
background: url(hbg.png);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
You need to add position: absolute; top: 0; left: 0; to .hbg and width and height of 100% so it spreads all over the parent container:)
.head {
position: relative;
z-index: 1;
margin-top: 10px;
height: 170px;
}
.head .hbg {
position: absolute;
top: 0px;
left: 0px;
background: url('http://gillespaquette.ca/images/stack-icon.png');
background-size: cover;
opacity: 0.3;
z-index: -1;
width: 100%;
height: 100%;
}
<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
I am using mix-blend-mode on css-generated content to create a multiplied background effect.
When I apply this generated element to an outer wrapper it has the intended effect:
.standard-cover {
background: blue;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
display: flex;
}
.standard-cover:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
content: "";
background: blue;
mix-blend-mode: multiply;
}
.image-wrap {
line-height: 0;
}
img {
object-fit: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.content-wrap {
position: relative;
text-align:center;
z-index: 30;
min-height: 1em;
margin: auto;
padding: 3.33%;
}
<div class="standard-cover">
<div class="image-wrap">
<img src="http://placeimg.com/480/480/nature" alt="Nature">
</div>
<div class="content-wrap">
<div class="content">
<h2>A title</h2>
<p>A pagragraph</p>
</div>
</div>
</div>
When I apply it to an inner wrapper it does not:
.standard-cover {
position: absolute;
background: blue;
color: #fff;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
display: flex;
}
.image-wrap {
line-height: 0;
}
img {
object-fit: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.content-wrap {
position: relative;
text-align:center;
z-index: 30;
min-height: 1em;
margin: auto;
padding: 3.33%;
}
.content-wrap:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
content: "";
background: blue;
mix-blend-mode: multiply;
}
.content {
position: relative;
z-index: 30;
}
<div class="standard-cover">
<div class="image-wrap">
<img src="http://placeimg.com/480/480/nature" alt="Nature">
</div>
<div class="content-wrap">
<div class="content">
<h2>A title</h2>
<p>A pagragraph</p>
</div>
</div>
</div>
In both cases the actual css that applies the faux background color is identical:
.class:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
content: "";
background: blue;
mix-blend-mode: multiply;
}
But in the first example it in fact applies the mix-blend-mode effect properly. In the second example it does not (despite inspectors confirming that the mix-blend-mode attribute is present and set to multiply).
Is there some nuance to the mix-blend-mode spec that I'm not understanding? Or am I missing some crucial something in my code?
It's all about stacking context. In the first case, the pseudo element is applied to .standard-cover where there is the background so its a child element of it and mix-blend-mode will work correctly because both belong to the same stacking context. In the second case, you moved the pseudo element to .content-wrap and there is a z-index specified so now it belong to another stacking context and mix-blend-mode will no more have effect outside.
An easy solution is to remove the z-index from .content-wrap to avoid creating a stacking context and mix-blend-mode will work like intended:
.standard-cover {
position: absolute;
background: blue;
color: #fff;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
display: flex;
}
.image-wrap {
line-height: 0;
}
img {
object-fit: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.content-wrap {
position: relative;
text-align:center;
min-height: 1em;
margin: auto;
padding: 3.33%;
}
.content-wrap:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
content: "";
background: blue;
mix-blend-mode: multiply;
}
.content {
position: relative;
z-index: 30;
}
<div class="standard-cover">
<div class="image-wrap">
<img src="http://placeimg.com/480/480/nature" alt="Nature">
</div>
<div class="content-wrap">
<div class="content">
<h2>A title</h2>
<p>A pagragraph</p>
</div>
</div>
</div>
Note: Applying a blendmode other than normal to the element must establish a new stacking context [CSS21]. This group must then be blended and composited with the stacking context that contains the element. ref
I achieved the same effect by applying the mix-blend-mode: difference !important; and filter: invert(1) !important; styles to the header element of my nav-bar, the nav-bar itself has a transparent background so it only finds of the difference of the child elements against the background.
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
If I have three divs, each with fixed position. How can I get .inner to appear above the .overlay?
HTML
<div class="container">
<div class="inner">The inner container</div>
</div>
<div class="overlay"></div>
CSS
.container {
position: fixed;
z-index: 1;
background: red;
height: 100px;
width: 100%;
}
.inner {
z-index: 3;
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
}
.overlay {
z-index: 2;
position: fixed;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In this JS fiddle, you can see how the "yellow" element renders below the overlay. Is there any change possible while keeping the .container fixed?
http://jsfiddle.net/4ne83oa4/8/
Well, if you must keep the markup as is, you can just play around with some pseudo classes for the .container class.
Markup stays the same, the CSS chages a bit like this: check js fiddle
.container {
position: fixed;
background: red;
height: 100px;
width: 100%;
z-index: 1;
}
.container:after,
.container:before{
content: '';
position: fixed;
}
.container:after{
z-index: -1;
background: red;
height: 100px;
width: 100%;
}
.container:before{
z-index: 1;
background: blue;
opacity: 0.5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.inner {
position: fixed;
margin-top: 10px;
width: 100%;
background: yellow;
height: 30px;
z-index: 1;
}
How can I keep a close button contained inside an image even is I change the img size using jquery
#full_image {
width: 200px;
height: 200px;
left: 0px;
top:10px;
position: relative;
opacity: 1;
z-index: 9;
}
#full_image img {
left: 20px;
width: 339px;
height: 211px;
position: relative;
overflow: hidden;
}
#full_image .close{
background: url("http://www.sobral.ce.gov.br/saudedafamilia/close.jpg") no-repeat;
top: 5px;
right: 0px;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
}
<div id="full_image"><img src="http://coe.berkeley.edu/forefront/fall2005/images/woz1.jpg" />
<span> </span>
</div>
JSFIDDLE
Use the following CSS:
#full_image {
position: relative;
}
#full_image span {
position: absolute;
top: 0;
right: 0;
}
This tells the span to be a positioned relatively to #full_image, and stick to top right of it.
Hope this helps :)
You don't specify what "close button contained inside an image" means. I would have tried to put my image and button like this:
HTML:
<div>
<img id="myImage"></img>
<button id="myButton" />
</div>
CSS:
#myImage {
position: relative;
}
#myButton {
position: absolute;
top: ???;
left: ???;
}
jQuery:
You have to calculate where to place your button (what you should give the CSS-attributes for f ex top: and left: )