I'm working with Angular and trying to bind an image to a div background.
The background need to be darker from the original image so text can be include later :
The problem Is - The image does not show properly inside the boundaries of the div; some parts of the image are missing.
.PictureCover {
background-size: cover;
margin: 10px;
width: 70px;
height: 100px;
float: left;
}
<div class="PictureCover" style="background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>
The url to the image from the example is temporary and will be replaced with a binding to a image from object in angular so inculding 'background-image' inside the PictureCover css class is not an option.
Thanks.
In .PictureCover, you could add:
background-position: center center;
.PictureCover {
background-size: cover;
margin: 10px;
width: 70px;
height: 100px;
float: left;
background-position: center center;
}
<div class="PictureCover" style="background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Entertainment/0/0/tom-cruise-playboy-interview-660.jpg);"></div>
Related
Why In the code below if I change
(height from vh to %) following change occur:
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
background-size: cover;
background-position: center;
}
.banner {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
background-size: cover;
background-position: center;
}
At banners height 100vh
before
At banners height 100%
At 100%
Why there is difference, as the 100% means the 100 percent of container. And here container is div(class banner) And it occupy the full page.
Is it possible to make same webpage with 100% height of banner?
VH gives height as screen size
100% returns the height of the found parent element.
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
margin-bottom:1rem;
}
header{
height:100px;
}
.banner2 {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
}
<div class="banner"></div>
<header>
<div class="banner2"></div>
</header>
Difference between % and vh :-
height: 100vh;
Example: If your device's viewport size is 1366 x 786px, the element considers the height as "786px" which means it occupies the full viewport height of the screen.
height: 100%;
Example: This depends on the parent element. It occupies the full height of the parent element.
Hope this helps. #AmirSaudagar
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 3 years ago.
I am able to set a background image that covers a page but the green overlay does not work. What am I doing wrong? Thank you.
body {
margin: 0 auto;
padding: 0;
background: url("../images/worldmap.jpg") no-repeat rgba(0,255,0,.5);
/*background-image: url("../images/worldmap.jpg");*/
/*background-repeat: no-repeat;*/
}
you may try this...
body {
margin: 0 auto;
padding: 0;
background-size:cover;
background:linear-gradient(0deg,rgba(0,255,0,.5);,rgba(0,255,0,.5);),url("../images/worldmap.jpg");
}
Try this
.overlay-image {
width: 300px;
height: 200px;
background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), url(https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg);
}
<div class="overlay-image"></div>
I solved it by adding the url for the background image at the end of the line.
.page{
background: -moz-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -webkit-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -webkit-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -o-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: -ms-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
background: linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
margin: 0 auto;
padding: 0;
}
Ok so I need to position text overtop of a slider and have a darkend background behind the text so that it's readable. Simply using text-align: center doesn't work in this instance as the darkened background takes up the entire page width
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
.wrapper{
position: relative;
width: 100%;
text-align: center;
}
So the only solution to this that I could think of was to position it using the left and right css properties. So in this case I put left and right to 40% each.
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%;
color: red;
margin: auto;
left: 40%;
right: 40%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
The problem though is that this has to be a dynamic page and work for all of the different screen sizes. Using this method I would have to code in the values for all the screen sizes I can come up with ... just seems like it's not an eloquent solution to me. Plus I'm also running into the issue now where the absolute text overlaps other elements if the user increases page zoom.
I'm still a noob so I'm hoping there's a better way to do this?
Thanks Guys!
Add the text inside your h4 in a span:
<h4><span class=text>SOME TEXT</span></h4>
And then:
.text{
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
And you can remove the padding from h4 so h4 would be:
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
Here is a fixed version of your pen
I have an image saved in my assets folder, it's a banner image and i'm displaying some text over it. I was using a linear gradient to make the text more readable and it looked nice, for some reason this just stopped working. (I didn't even change anything)
this is what I think SHOULD work:
background-image: url('banner_img.jpg'), ( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )
but Rails will only load the image if I use:
background: image-url('banner_img.jpg')
adding a linear gradient to this does not work.
Any ideas?
thanks
Here is my code for you.
HTML
<div class='foo'></div>
CSS
.foo {
position: relative;
background-image: url('http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg');
width: 400px;
height: 200px;
}
.foo:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, red, orange);
mix-blend-mode: color;
}
Look codepan.
I have a logo image that is refusing to display in Safari 4/5. Can anyone shed any light on this?
This is the CSS / (uncompiled less) -
background: url("../img/logos%20and%20icons/logoLrg.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);
#media(max-width:400px){
background: url("../img/logos%20and%20icons/logoSML.png") no-repeat scroll 0 right / contain rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;
try without spaces
background: url("../img/logos and icons/logoLrg.png") no-repeat scroll 0 0 / contain rgba(0, 0, 0, 0);
#media(max-width:400px){
background: url("../img/logos and icons/logoSML.png") no-repeat scroll 0 right / contain rgba(0, 0, 0, 0);
}
display: block;
height: 50px;
margin-top: 29px;
width: 205px;
z-index: 255;
You don't have to use url encoding to set a path for a background image in a style sheet. It seems to me that if you replace %20 by a + sign you probably solve that issue. I'll come back with more information about it though.