I would like to extend the length of my page but i'm not entirely sure how. As of right now, I have a picture on the webpage. At the bottom of the picture, I want to place another one. However when I insert a new picture into the code, it overlaps the existing one due to the cascading style sheets.
.background-pic .number-1 {
background-image: url('../resources/images/hoth4.jpg');
background-repeat: no-repeat;
background-size: 109%;
height: 930px;
position: fixed;
width: 100%;
background-color: white;
z-index: 1;
}
.background-pic .number-2 {
background-image: url('../resources/images/hoth2.jpg');
background-repeat: no-repeat;
background-size: 109%;
height: 930px;
position: fixed;
width: 100%;
background-color: white;
z-index: 1;
}
Remove position:fixed
and add
.background-pic [class^=number]{
display:block;
clear:both
}
Related
I've got a div with a CSS which states background-repeat: no-repeat;, but if the div is bigger then the image, the image starts to repeat itself.
Any ideas, suggestions etc are welcome. Thank you
.background-image{
position: fixed;
top:0px;
background-repeat: no-repeat;
overflow: hidden;
z-index: -1;
background-size: 1700px, 819px;
background: url('../assets/kafa.jpg');
border: 0px;
background-position: -1050px -550px;
width: 100%;
height: 100%;
}
https://jsfiddle.net/ohymeft0/
Try to change background to background-image and that should work
You are using the background shorthand property which sets many values, including background-repeat. Either change background to background-image, or place your background-repeat property after the background rule.
Try this:
.background-image{
position: fixed;
top:0px;
overflow: hidden;
z-index: -1;
background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg') no-repeat;
width: 100%;
height: 100%;
}
As #chriskirknielsen said, your overriding your properties. This solves that.
The property background is shorthand for several CSS background properties (see
https://developer.mozilla.org/en-US/docs/Web/CSS/background).
Where you've set that after background-repeat: no-repeat it overrides the previous property and uses its default repeat style.
If you replace background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg'); in your example with background-image (see the amended code snippet below) it should give the result you're expecting.
.background-image {
position: fixed;
top: 0px;
background-repeat: no-repeat;
overflow: hidden;
z-index: -1;
background-size: 1700px, 819px;
background-image: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg');
border: 0px;
background-position: -1050px -550px;
width: 100%;
height: 100%;
}
<div class="background-image"></div>
.background-image{
position: fixed;
top:0px;
overflow: hidden;
z-index: -1;
background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg') no-repeat;
width: 100%;
height: 100%;
}
I've got two divs .navigation & .entry-image
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: #008dd0;
background-blend-mode: multiply;
z-index: 100;
color: #fff;
background-size: cover;
background-position: top;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
}
The background aligns well on widescreen however set as size:cover, they do not stay aligned as they respond obviously.
I've experimented with background-size:100% - this does not work on 100vh as it repeats.
Any suggestion on how I can keep the backgrounds aligning while still maintaining 100vh on the parent container. This is all due to the .navigation having a multiply blend mode applied which is only required behind the .navigation div
codepen: https://codepen.io/lisa-jaffe/pen/jOErBBX
I hope I understood your question correctly. If so:
If what you're trying to achieve is to have a sort of overlay on top of the image then instead of trying to align 2 images, which is rather difficult, you can use a proper "overlay", which is far simpler.
What I did was remove the navigation image and instead use a background color with transparency. You get the same result as your code but without the alignment issues.
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: rgba(6, 84, 121, 0.7);
z-index: 100;
color: #fff;
height:300px;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
background-image:url(https://loremflickr.com/1680/1050);
}
<div class="navigation"></div>
<div class="entry-image"></div>
Here's a codesandbox if you need that instead
Is it possible to use CSS to make the background of the top 5% of a page a solid color, and two different background images for the remaining 65% and 30%?
This is how I need it to look:
Edit 2: So there are numerous ways to accomplish this.
Pseudo elements: I think this is the best method, as it avoids extra elements in the markup and allows good control of scaling/cropping. Example below.
Multiple containers: Works just like pseudo elements, but with the added disadvantage of extra elements in the markup. The best support across older browsers, but these days, pseudo elements are quite well supported. Example below.
Multiple backgrounds: This may be suitable for solid colors or gradients, but for most images scaling and cropping will be problematic if using percentages for size. Example below.
1. Pseudo Elements
Just add ::before and ::after pseudo elements to the pagewrapper, supply background images, and position accordingly.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.pagewrap::before {
content: "";
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.pagewrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
</div>
2. Multiple Containers
Just replace the pseudo elements in above example with container divs in the html.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.mid65 {
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.btm30 {
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
<div class="mid65"></div>
<div class="btm30"></div>
</div>
3. Multiple Background Images
Use multiple background images:
background-image: url("image1.jpg"), url(image2.jpg);
then use the same comma separated syntax
for background-repeat: no-repeat, no-repeat; (same value need not repeat)
and background-size: 100% 30%, 100% 65%;,
etc..
The background position is the tricky part though, because it doesn't seem to work as one might expect (Temani Afif kindly provided a very informative link in the comments below ). But this seems to achieve the desired result of 5% 65% 30%:
background-position: bottom left, 0% 15%;
Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: 100% 30%, 100% 65%;
background-position: bottom left, 0% 15%;
background-repeat: no-repeat;
}
<div class="pagewrap"></div>
I currently have this code:
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
width: 100vw;
height: 100vh;
}
.bg {
margin: 0;
overflow: hidden;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
}
.bg figure {
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
width: 100vw;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
}
<div class="bg"><figure></figure></div>
The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.
However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?
I strongly prefer a CSS3-only solution.
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
height: 100vh;
}
body::before {
content: '';
position: fixed;
height: 100%;
width: 100%;
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
}
div {
color: white;
font-size: 30px;
}
<div>Hey there....</div>
I have a div with a background color and a background image. The div calls this class:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
I am trying to make only the image somewhat transparent. I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
opacity: 0.6;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the entire div transparent.
So I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png) opacity(0.6);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the image disappear entirely. Can this be done?
What you're trying to do on that single element isn't possible, but there's plenty of ways that could do the same thing with very little extra effort. Probably the best way would be to either add an additional child element to the .cakebg element with the same dimensions that only has the background image, with opacity. Such as:
.cakebg .child-element {
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If you're trying to keep your markup clean, you can even add this as a pseudoelement. Such as the following:
.cakebg:after {
content: "";
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If neither of those methods work, a last resort could be editing the image to have that opacity baked in from your favorite editing software. Hopefully some of these methods might help!
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
position: relative;
}
.cakebg::after {
content: "";
background: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
OR you can simply use an trasparent png image as background
There is no CSS property to make just the background transparent, but you can fake it by inserting a pseudo element with the same size of element behind it and change the opacity of this.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
.cakebg::after {
content: "";
background-image: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Please note that that question was already asked quite often, read here for example.