I have set below code for background image on empty div but it is not responsive. I don't want to set fixed height. is there any other way to do so?
.flexslider .slides .page-hero {
background-position: 50% 0%;
background-image: url('https://simu.danoneactivia.co.uk/sites/EN_UK/files/carousel/final-Frontpage-Activia-banner.jpg');
}
.front .page-hero {
overflow-y: visible;
}
.page-hero {
background-color: #008b3c;
}
.page-hero {
height: 535px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
text-align: center;
position: relative;
margin-bottom: 3em;
}
Related
I have a div with a margin containing an image. I want to put another div inside that div and position it to the bottom of the parent div (Like even to the margin). However I'm unable to do that.
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
It looks like this:
But I want it to look like this:
css solution would be like:
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
position: relative;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
position: absolute;
bottom: -40px;
}
otherwise you also could place the .topnav in the .marioHeader (pull it out of the .headermario class) and adjust it there. But to write this I require styling information of the .marioHeader class
The easiest way I can think of is with flex
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
display: flex;
flex-direction: column-reverse
}
I'm learning from a project which uses cards with border-radius 50px. However, on wider screen, the border is not working. It's a quite simple code, bud I don't understand why this is happening
Can you help me?
<div class="panel panel1" style="background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8fA%3D%3D&w=1000&q=80')">
<h3>Explore the world</h3>
</div>
body {
font-family: 'Muli', sans-serif;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
width: 90vw;
overflow: hidden;
}
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: white;
cursor: pointer;
flex: 0.2;
margin: 15px;
position: relative;
transition: flex 0.7s ease-in;
overflow: hidden;
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 60px;
left: 200px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 2;
overflow: hidden;
}
Border radius not working
looking at the print screen it looks like the border radius is working, but the div is being cut, maybe you can solve this by adding a width to the panel
This is what my background currently looks like with the following CSS and background attachement fixed applied
/* APPLY SECTION */
section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
}
.apply::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.apply * {
position: relative;
z-index: 10;
}
.apply .apply-content {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.apply .apply-content h2 {
max-width: 30rem;
font-size: 3.2rem;
color: #fff;
font-weight: 300;
text-align: center;
}
This is with background-attachement fixed removed
How do I add background attachment fixed and be able to center the background using background-position, size, and repeat?
section.apply {
height: 55rem;
width: 100%;
background: url("../img/apply.jpg") no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
position: relative;
background-position-y:10px
}
try using this
I'm getting a weird result in IE11 (surprise) with a background image fade.
I have this for my CSS:
.parent {
position: relative;
min-height: 400px;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
-ms-flex-pack: center;
-ms-flex-align: center;
color: #fff;
z-index: 0;
margin-top: 100px;
}
.parent::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background: -webkit-linear-gradient(transparent, #FFF) left repeat;
background: linear-gradient(transparent, #FFF) left repeat;
min-height: inherit;
}
But when I check it out in IE11 it sorta works but I'm getting this hard line down the image:
Not sure what I'm missing?
First image is going as a background with its multiply blend mode and its color (100% x 1172px).
At the very bottom of this container is a block (50% x 520px) with same background, but without blending mode.
What exactly I'm trying to reach.
-- The idea is to keep these two image as a single one at least to >= 920px width of breakpoint.
HTML&CSS markup
.main-container {
display: flex;
height: 1172px;
width: 100%;
position: relative;
}
.main__fluid {
display: flex;
flex: 1;
}
.main__fluid--image {
background: url(https://i.imgur.com/eRnGawp.jpg);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.main__inner-block {
display: flex;
align-items: flex-end;
position: relative;
height: 520px;
width: 50%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
border-radius: 10px;
box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.28);
z-index: 9;
}
.main__inner-block--image-mask {
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: url(https://i.imgur.com/Piu55zF.jpg);
background-repeat: no-repeat;
background-position: top -36rem center;
max-width: 100%:
}
.main__navigation {
height: 80px;
width: 100%;
background-color: #5ec8c3;
position: relative;
}
.footer {
background-color: #1f5c71;
height: 91px;
position: relative;
top: -5rem;
}
<div class="main-container">
<div class="main__fluid main__fluid--image">
<div class="main__inner-block main__inner-block--image-mask">
<div class="image"></div>
</div>
</div>
</div>
Currently have this one:
jsfiddle
jsfiddle (UPD)
UPD: found somewhat partial solution
I will assign parent for big image (which is with blending mode)
and child for smaller image (which is without blending mode)
Actually I just deleted property background-size from parent or/and add background-size: auto auto to its style, the idea is to, of course, prevent resizing on Y axis. Then did tweaks for child to fit it relative parent through background-position and the last one, aligned them centered with background-position: center. Updated jsfiddle with these changes.
Try this css block. It will align both images into same position.
.main-container {
display: flex;
height: 1172px;
width: 100%;
position: relative;
}
.main__fluid {
display: flex;
flex: 1;
}
.main__fluid--image {
background: url(https://i.imgur.com/Piu55zF.jpg);
background-size: cover;
position: relative;
background-color: #51c8c4;
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: top -27rem center;
}
.main__inner-block {
position: relative;
height: 45%;
width: 80%;
margin-top: 20.5%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 1px 2px 1px 0px rgba(0, 0, 0, 0.28)
}
.main__inner-block--image-mask {
overflow: hidden;
}
.image {
position: relative;
width: 100%;
height: 100%;
background: url(https://i.imgur.com/Piu55zF.jpg);
background-repeat: no-repeat;
background-position: top -45rem center;
}