I have an app that displays album covers in a carousel. When an album is centered on the carousel it gets a class of sc-selected. I've assigned a play button image as the background on sc-selected, but it is hidden behind the album image and thus invisible. Not sure how to fix this...
You can see it here: http://lifemusic.cc/
<li class="sc-selected" style="-webkit-transform-origin: 50% 175px; -webkit-transform: translate(320px, 0px) scale(0.9999999918937683) translateZ(0px); opacity: 0.9999999918937683; z-index: 3;">
<img src="http://userserve-ak.last.fm/serve/174s/92659171.png" class="album-cover sc-image">
</li>
CSS:
.sc-selected {
background: url('../images/playButton.png');
background-repeat: no-repeat;
}
You can use the ::before psuedo element to overlay the play button in separate element without adding any more html.
.sc-selected::before {
content: ' ';
display: block;
position: absolute;
height: 100%;
width: 100%;
background: url('../images/playButton.png') center no-repeat;
}
Try this:
.sc-selected {
background: url('../images/playButton.png');
background-repeat: no-repeat;
z-index: 99999999;
}
Related
I'm trying to place some text over an image that has a background color as a tint and opacity.
I'm using Bootstrap 4 and it's possible some classes are overriding each other, but not 100% sure.
This is what I currently have:
Index.cshtml:
<div class="layer">
<div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
<div class="container-fluid jumbotron-content">
<h1 class="text-center jumbotron-header mb-4">Hey there, I'm #Model.FullName!</h1>
</div>
</div>
</div>
site.css:
.jumbotron-container {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: opacity(60%);
}
.resume-jumbotron {
background-image: url(https://content.codecademy.com/courses/asp-dot-net/boots.png);
}
.layer {
background-color: #512F1E;
position: relative;
}
.jumbotron-header {
font-weight: bold;
}
The above renders this:
I've tried adding a z-index and position to the layer and the header but it screws up the rest of the positioning in the jumbotron.
The currently rendered text shows up behind the background color. How can I position the text so it renders above the .layer div despite it being a child of it?
The text isn't showing up behind anything. It has reduced opacity, as set on the jumbotron element. You cannot reset opacity for interior elements. Instead, apply a mask over your background image:
.jumbotron-container {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.jumbotron-container::before {
position: absolute;
content: '';
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
}
Demo
I did have to set position on .jumbotron-content to keep the pseudo-element behind it.
Replace my black mask color with the rgba equivalent of your hex color. You can eliminate the layer element.
I want to link an image url to a div so that image will be used as a background and watermark for the content within the div.
When I set the url to the body, it repeats the image, which i dont want.
<body style="background-color: white; background-image: url(https://preview.ibb.co/ntRarR/watermark3.png);">
...
</body>
And when I set the url within the div (where i want it and which is inside the body tag), the image does not appear.
<div style="background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center">
...
</div>
Any advice is greatly appreciated.
Thanks
use this way for image opacity
.bgdiv {
position: relative;
z-index: 1;
width:450px;
height:450px;
}
.bgdiv .bg {
position: absolute;
background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
background-size:100%;
opacity: .4;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="bgdiv">
<div class="bg"></div>
...
</div>
for body use
background-repeat:no-repeat;background-size:cover;
body{
background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center;background-repeat:no-repeat;background-size:cover;}
Make sure your div is not empty.
Use property
background:url('https://preview.ibb.co/ntRarR/watermark3.png');
to give background for your div.
If you apply background property to body tag, it will be applied to the
entire webpage.
In case you want to apply background image to the body tag, use
background-size: cover; (cover the entire page).
<div class = "LeftMain" >
<a href = "#" > <button>Go</button></a>
</div>
.LeftMain{
float: left;
width: 600px;
}
.LeftMain {
background: url(Astronaut.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
I'm creating a mini project, and I am trying to create a button appear in front of a background image, this doesn't really work as it only displays a bit of the top part of the background image along with the button "Go". I have floated the section as its two parts but I'm just talking about the left side for now. So how can I make the full background image appear with the button in the centre of the background image?
Do you mean something like this?
.container {
width: 200px;
height: 200px;
position: relative;
background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg);
background-size: cover;
background-position: center;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<button>Go</button>
</div>
I want to crop an image edge to set that edge transparant. I have used png to set to that edge when the background color white. But when it use for other backgrounds that white edge is there. So I want to know how to crop that image edge.
Here's the CSS for the styling
.cover-left-2 .avatar:after {
width: 38px;
height: 22px;
background-position: -47px bottom;
}
.avatar:after {
content: " ";
display: block;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.9;
filter: alpha(opacity=80);
pointer-events: none;
background: url(../img/photo-corner-sw.png) no-repeat left bottom;
background-image: url(../img/photo-corner-sw.svg);
}
The image.
I found a jquery plugin call polycrop. You just need to add jquery to the page and add polyclip property to the element (the image you want to crop).
<img src="http://lorempixel.com/200/150/people/1/Nishan/"
data-polyclip="0,0,199,0,199,151,50,150,0,97">
That's it!
The image looks like this after cropped
jsfiddle example : http://jsfiddle.net/rb73hc53/
I want to cover an image by another transparent color or another image so that i will be able to view image contents clearly from covered color
Check the following example :
div {
background: url( ..) no-repeat;
width: 100px;
height: 100px;
position: relative;
}
div:after {
content: "";
background: rgba(255,255,255,.4);
position: absolute;
width: 100px;
height: 100px;
}
IF you want to cover an image with a transparent overlay or an image you can achieve this with pseudo elements
http://jsfiddle.net/wef8M/
But if you want to have some content in the overlay you have to create a wrapper to wrap the background img.