Hi how do i force wpdemos_wrapper div to be basing his height to the content? If i remove the height 900px the 2nd background wont appear.
div.wpdemos_wrapper
{
position: relative;
min-height:100%;
padding:0 0 20px;
background-image: url("./images/body/bg_honeycomb_top.png");
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
width: 100%;
z-index: 0;
height: 900px;
}
div.wpdemos_wrapper:before
{
position: absolute;
content: "";
background-image: url("./images/body/bg_honeycomb_bottom.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
width: 100%;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
I think it would be much easier to apply the bg_honeycomb_top.png image to the :before pseudo-element and then apply the bg_honeycomb_bottom.png image to the main div.wpdemos_wrapper. The :before pseudo-element appears before the content in the div, so it is much easier that way. :) You can then remove the fixed height on the main div and clean it up a bit.
Sample code
This will allow you to repeat the background images across the entire width of the top and bottom of the div. This is using repeat-x for the images but you can change it to contain if you're wanting. :)
div.wpdemos_wrapper {
padding:0 0 20px;
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") repeat-x bottom center;
}
div.wpdemos_wrapper:before {
display: block;
content: " ";
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") repeat-x top center;
height: 20px; /* height of the background image */
width: 100%;
}
you may be able to use display: table on div.wpdemos_wrapper and corresponding display: table-cell on its children? Then the wrapper will always be the same height as their children even without an explicit height.
this is my new code nerwood. It is now working fine with height issues. However the top background wont appear..
div.wpdemos_wrapper {
position: relative;
padding:0 0 20px;
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") no-repeat bottom center/contain;
width: 100%;
}
div.wpdemos_wrapper:before {
position: absolute;
content: "";
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") no-repeat top center/contain;
width: 100%;
}
Related
I'm trying to make the background-image of a parent stretched to a pseudo element.
I'm currently using the code below and it works in a sense that it's using the same image but the placement is not correct (see screenshot). I'd like this to be seamless.
.parent {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.parent::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background: inherit;
z-index: 1;
}
Setting the parent's background-attachement to fixed seems to make it work but then I get an unwanted parallax effect on the parent.
Is there a way to make this work in a way that allows me to stretch the background image but avoid parallax? All help much appreciated!
Make the pseudo element cover the whole element and only its background will be visible:
.parent {
position: relative;
background-image:url(https://picsum.photos/id/1018/800/800);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position:relative;
z-index:0;
height:100px;
}
.parent::after {
content: '';
position: absolute;
z-index:-1;
bottom: -15px;
left: 0;
width: 100%;
top:0;
background: inherit;
z-index: -1;
}
<div class="parent">
</div>
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 2 years ago.
I am trying to have a large header where there is a background photo and then a solid color overtop it with a opacity of like 90%. (so you can barely see the photo).
This is basically what I have:
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
background-color: #053426;
min-height: 60%;
opacity: 0.9;
}
<header class="bgimg-1 bgoverlay"></header>
edit
Thank you everyone - adding the :before is so far working out nicely. Although, when it comes to responsive, is there a way to change the background size? I tried background-size but it isn't changing.
For example, if I have the min-height at 70% so the whole header takes up 3/4th of the page but then when I shrink it to mobile size the solid background color is revealed below and the photo is small and not large enough to cover the 71% min height.
Thanks
edit 2
nvm I ended up using an #media screen to just shrink the overall header on mobile and now it looks great. Thank you!
You can use a pseudo-element like :before.
First, add position: relative to the header element. Then, add the pseudo-element absolutely positioned with the color and opacity, occupying the whole width and height of its parent (header).
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
<header class="bgimg-1 bgoverlay"></header>
hope this help you.
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 300px;
position: relative;
}
header.bgimg-1.bgoverlay:after {
content: '';
height: 100%;
width: 100%;
background: #000;
opacity: 0.9;
position: absolute;
}
<header class="bgimg-1 bgoverlay">
</header>
Use a really large inner box-shadow if the solution by Azametzin doesn't pan out for you (relative positioning might get tricky with your content). But please use their solution as a real one, and maybe mine as a fallback. It is a bit hacky after all.
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
box-shadow: inset 0 0 0 100vmax rgba(2, 20, 15, 0.9)
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
<header class="bgimg-1 bgoverlay"></header>
I have made a codepen to explain my problem:
When the user scroll, the blue images should follow the user scroll
The blue images should be stuck on the opposite side of the aside parts (right for the left one | left for the right one)
The pb is that
background-attachment : fixed;
isn't working this the css rule
background-position: left 0px;
Someone can help me by forking the codepen to show me a working implementation ?
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
/*background-attachment: fixed; Doesn't work*/
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
Why is this happening?
This is working as intended, when you use background-position: fixed; the background is positioned relative to the viewport. This means in your example the background is now aligned on the very left of the viewport outside of the .right element.
You can see this by positioning .right along the left edge of the viewport in the snippet below.
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
background-attachment: fixed;
order: -1;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
What can you do?
There is no way to position the background relative to the element when using background-position: fixed; but you can achieve a similar desired result by using a position: fixed; pseudo element:
Add a new selector .left:before, .right:before with the following rules
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png); - The background image
background-repeat: no-repeat; - Stop the background from repeating
content: ""; - Required for the pseudo element to show
position: fixed; - Set the pseudo element to be fixed relative to the viewport
height: 100%; - Make the pseudo element fill the entire height
width: 100px; - Same as the width of the background image
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
direction: rtl;
}
.left:before, .right:before {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
content: "";
position: fixed;
height: 100%;
width: 100%;
}
.left:before {
background-position: right top;
}
.right:before {
background-position: left top;
}
.right div {
position: relative;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right">
<div>content</div>
</aside>
</div>
Please note, if you intend to put other content into .right you will need to add position: relative; to the element to set the stacking context above the pseudo element (see the div in the snippet).
Why does this work?
position: fixed; fixes the element to a set position relative to the viewport. By not setting a bottom, left, right or top position the pseudo element stays where it is originally positioned. The background can them be applied to the element in the usual way.
The problem is that you don't scroll the aside because you scroll the body
You should avoid that because it's not responsive but you can get the idea of it
.wrapper {
width: 558px;
background-color: green;
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png), url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat, no-repeat;
background-position: left 47px top 0px, right 104px top 0px;
background-attachment: fixed;
}
main {
background-color: red;
width: 280px;
height: 1000px;
margin: 0px auto;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
I have two divs. First acts as a banner of sorts. The next is just a small div that I'm trying to place directly below the first div. I've tried taking away float and adding clear: both. Perhaps I'm missing something? Below is my html and css
<div id="background">
</div>
<div id="us">
</div>
#background
{
width: 100%;
height: 10%;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #000;
background-color:black;
background-image: url(resources/images/****.png);
background-repeat: no-repeat;
background-position: center;
clear: both;
}
#us
{
display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
position: absolute;
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The first div does appear at the top of the page and displays correctly. The second one appears over top of the first div. Any advice?
Check this out.
Fiddle
Just add top:10%; to your #us because you are using position:absolute.
The size of your top in #us must be the same size with your height in #background. I also added box-sizing:border-box; for you borders not to take space.
try this one
#us
{display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
**margin-top: 50px;**
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
You have used position: absolute; in CSS of second div(#us) that's why it is showing on top of first div. Change that to position: relative; or delete that line.
And you are ready to go.
The css below is what I've applied to the Facebook, twitter, and Google plus links, I've added to a website I'm making, I want to make it so that when i scroll down on the website the Facebook, twitter, and Google plus icons stay in the top, right hand corner of the screen.
I added position: fixed; to it and they stay in that corner when i scroll; however, they pile on top of each other, this should come easy to me, but my brains blank:
.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/fb.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.facebook:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.twitter {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/tw.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.twitter:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.gp {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/gp.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.gp:hover {
background-image: url('Styling-Images/bgcolor.png');
}
first create an div element with fixed position then put all images in that.
Don't use fix position for images because it will overlap each image
Try this. Giving margin-right:5px; for all the items is causing the problem.
.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('http://ottopilotmedia.com/wp- content/uploads/2012/07/facebook-icon.jpg') center top no-repeat;
background-size: contain;
float:left;
}