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
Related
I used this code painted all items on body, I need only image on the body background
$fondo: url(/grid/assets/img/backimage.png);
{ padding: 0; margin: 0; } body { ::before{
content:"" ; height: 1008px; width: 100%; display: flex; position: absolute;
background-image: $fondo ; background-repeat: no-repeat ; background-position:
center; background-size: cover; filter: blur(1.6rem);
}
}
Try this way
$fondo: url(/grid/assets/img/backimage.png);
body {
padding: 0; margin: 0;
&::before{
content:"" ;
height: 1008px;
width: 100%;
display: flex;
position: absolute;
background-image: $fondo;
background-repeat: no-repeat;
background-position: center;
background-size: cover; filter: blur(1.6rem);
}
}
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;
}
I want the about div to show up BELOW the
full screen home card
I'm having troubles getting it to show like it should.
my html code has both divs in the "right" order and when i look it up online, i couldn't find any solutions.
<body>
<div class="homeCard">
<div class="homeCardTitle">
<h1>Robin Riezebos</h1>
</div>
</div>
<div class="aboutCard">
<div class="aboutCardText">
<h2>About</h2>
</div>
</div>
</body>
my css is either missing something or I did something completely wrong but I can't seem to find out what it is so please help...
index.css
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
position: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: fixed;
width: 100%;
height: 320px;
top: 50%;
margin-top: -160px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
Please change your css like below, i think the problem was with position fixed, if you want to get your background image rendered fully please respective pixels of height.
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
width: 100%;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
I have found a solution by bugging around in my css.
Turns out in stead of position: fixed; I should have used background-attachment: fixed; and remove position all-together.
this is my own fixed code:
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
background-attachment: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: relative;
width: 100%;
height: 0px;
top: 50%;
margin-top: -90px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
width: 100%;
background-color: #1F1F1F;
color: white;
height: 320px;
float: left;
text-align: center;
}
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;
}
On my site, www.azletconsulting.com, when the site drops below 950px safari breaks the positioning of the Register to Vote, Join the Campaign etc menu positioning. At the larger sizes everything is aligned properly but as soon as it drops to one of the smaller css media queries the menu buttons break alignment. The code is the same between all the media queries and I have no issue in Chrome/Firefox.
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28 a {
left: -200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/rov.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-29 a {
top: -90px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/join.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-30 a {
top: -175px;
left: 200px;
position: relative;
display: inline-block;
width: 200px;
height: 80.5px;
background-image: url("images/buttons/medium/contribute.png");
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden
}
Try this:
.main_footer_menu {
left: 0;
bottom: 0;
top: 319px;
position: absolute;
width: 100%;
height: 80px;
background-color: rgba(93, 93, 93, 1);
z-index: 10;
box-sizing: border-box;
}
ul#menu-bottom-menu {
margin: 0;
padding: 0;
height: 80px;
}
li#menu-item-28, li#menu-item-29, li#menu-item-30 {
display: inline-block;
}
li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 a {
display: inline-block;
width: 200px;
height: 80.5px;
background-size: 200px 80.5px;
background-repeat: no-repeat;
background-position: center;
text-indent: -99999999px;
overflow: hidden;
}
li#menu-item-28 a {
background-image: url("images/buttons/medium/rov.png");
}
li#menu-item-29 a {
background-image: url("images/buttons/medium/join.png");
}
li#menu-item-30 a {
background-image: url("images/buttons/medium/contribute.png");
}