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%;
}
Related
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 want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.
I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings
JSFIDDLE
HTML:
<div class="mydiv">
<div class='bgblur'></div>
</div>
CSS:
body {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
.bgblur {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(26px);
-moz-filter: blur(26px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.mydiv {
position: relative;
overflow: hidden;
// not necessary
border: 2px solid black;
height: 200px;
width: 200px;
}
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
}
i have a left admin panel which is set in percentage width. the problem is that i have a repeating background in it and when i use background-size to tuck-in the background image to the size of percentage-based width, the image just disappears in chrome. in firefox it works fine. But when i use ctrl - to zoom-out the display, the image appears.
the css of the left panel is:
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top repeat-y;
background-size: 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
pls help.
You can use 100% 100% for background size.
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top;
background-size: 100% 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
http://jsfiddle.net/aEJRB/
try this
background-size:contain;
background-size: cover;
Try this.