I'm attempting to apply a background image gradient over an image by setting it on its parent div, but it's having no effect, which is strange so I've done this before.
<header id="hero">
<div id="hero-image">
<img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" />
</div>
</header>
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
width: 100%;
max-height: 500px;
object-fit: cover;
}
Demo: http://codepen.io/ourcore/pen/xgqNZJ
I was able to achieve this by applying position: relative and z-index: -1 to #hero-image img:
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
position: relative;
width: 100%;
max-height: 500px;
object-fit: cover;
z-index: -1;
}
Related
I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?
My site:
https://wandawix.github.io/online-zoo/index.html
My code:
https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}
Try using this:
.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
#media only screen and (min-width: 968px) {
height: 75vh;
}
}
And see if this works
Do you maybe know how (and if) I can add an opacity for the background image but only to PART of it?
The effect should be like this one: https://i.stack.imgur.com/HYvaU.png.
I have only added the image as a background but I cannot find any solution for this oppacity.
My HTML:
<header>
<img src="images/logo.svg" />
<h1>A history of everything you copy</h1>
<p>
Clipboard allows you to track and organize everything you copy.
Instantly access your clipboard on all your devices.
</p>
</header>
And CSS:
body {
font-family: "Bai Jamjuree", sans-serif;
text-align: center;
}
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
h1 {
color: hsl(210, 10%, 33%);
font-size: 35px;
margin-bottom: 15px;
}
header > p {
color: hsl(201, 11%, 66%);
font-size: 18px;
}
Thank you in advance!
I have tried to use mask-image but it didn't work:
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent 74%);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
Do you have maybe any idea if I can give an opacity only for the bottom part of this background image using CSS?
With more than 1 background, you can put image in 1 and opacity on the other.
You can change 2nd background color as you want. It's opacity value is given by the RGBA background color (here 0.75 in the snippet).
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 10em;
font-weight: bold;
font-family: sans-serif;
background: url("https://picsum.photos/id/22/1280/600");
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(50% 0 0 0);
background-color: rgba(255, 255, 255, 0.75);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
<div class="wrapper">
<div class="wrapper1"></div>
<div class="wrapper2">Hello World!</div>
</div>
Look at the snipper in full scree, for this demo I put width 100vw, so in small result is "strange"
My linear-gradient only goes to the bottom of the div.
Question How to make sure the body linear-gradient goes to full height of the page?
CODEPEN DEMO
CSS
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.header {
background: #FFFFFF;
width: 100%;
height: 50px;
}
.wrapper {
background: #F0F0F0;
min-height: 600px;
}
#media (max-width: 968px) {
.text-mobile {
text-align: center !important;
}
}
HTML
<div class="container">
<div class="wrapper"></div>
</div>
You need to set your html and body height to 100%;
html, body {
height: 100%;
}
I want to make an image inside div to scroll down on hover. And that part is working.
Also, I need to make that it scroll longer if the image is longer and because of that I was trying to use calc inside of transition, but it is not working.
Here is my code:
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-
content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
transition: all calc(0.02s * height) ease-in-out;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
transition: all calc(0.02s * height) ease-in-out;
}
<div class="preview">
<div class="previewimg"></div>
</div>
If there is some other better way to do this I can use it too.
Ok to do this you need it to be an image only not a background image, to do this transition duration based on height functionality, please use the below code.
$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");
.preview {
position: relative;
width: 75%;
height: 300px;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.preview .previewimg {
width: 100%;
height: auto;
transform: translateY(0px);
}
.preview:hover .previewimg {
transform: translateY(calc(-100% + 300px));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>
If you are accepting JS as a solution then here is a code you can add without changing your HTML/CSS structure :
function getHeight(url) {
console.log(url);
var img = new Image();
img.src = url;
return 0.002*parseInt(img.height);
}
var e =$(".previewimg");
var tr = "all "+getHeight(e.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'))+"s ease-in-out";
console.log(tr);
e.css('transition',tr);
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<div class="previewimg"></div>
</div>
You don't actually use javascript for it.
it's codepen : codepen.io or it's the css code for you code:
.preview {
width:300px;
height:300px;
overflow: hidden;
}
.previewimg{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://source.unsplash.com/500x1500/);
transition: background-position 2s ease-out;
}
.preview:hover .previewimg{
background-position: 0 100%;
}
you can add other body elements with the styles classes name. And it make a boxes that when we hover the logo is changed. The logo is changes on hover.
*{
box-sizing: border-box;
}
.logoses{
text-align: center;
list-style: none;
}
.logoses .logo{
width: 178px;
height: 75px;
background:
url('G:/touqeer/amp-landing-pages/assets/images/clients_logo.png') center top no-repeat;
margin: 0 2px 8px;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
transition: all .4s ease-in;
}
#amara{
background-position: 5px -125px;
}
#amara:hover{
background-position: 5px 0px;
}
#ge{
background-position: -1486px -125px;
}
#ge:hover{
background-position: -1486px -2px;
}
#nuance{
background-position: -489px -124px;
}
#nuance:hover{
background-position: -489px -1px;
}
#gilson{
background-position: -329px -123px;
}
#gilson:hover{
background-position: -329px 0px;
}
#pcs_wireless{
background-position: -824px -125px;
}
#pcs_wireless:hover{
background-position: -824px -2px;
}
#herbalife{
background-position: -161px -123px;
}
#herbalife:hover{
background-position:-161px 0px;
}
#pcf{
background-position: -659px -125px;
}
#pcf:hover{
background-position: -659px -2px;
}
#seimens{
background-position: -991px -125px;
}
#seimens:hover{
background-position:-991px -2px;
}
#melesta_games{
background-position: -1156px -124px;
}
#melesta_games:hover{
background-position: -1156px 1px;
}
#samsung{
background-position: -1324px -123px;
}
#samsung:hover{
background-position: -1324px 0px;
}
.center_pd{
padding: 75px 0px;
}
.text_bottom{
margin: 0px 0px 60px 0px;
}
.center_text{
text-align: center;
}
.header{
margin: 0px 0px 20px 0px;
}
h2{
font-size: 30px ;
font-weight: 400;
color: #393939;
}
.prg{
font-size: 16px;
color: #333;
font-family: Open Sans;
}
How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>