I have following sets of css:
.spinner {
background-image: url('../assets/spinner.svg');
position: absolute;
top: 40%;
left: 45%;
height: 200px;
width: 200px;
background-repeat: no-repeat;
background-position: center;
}
.overlay {
height: 100%;
width: 100%;
background: black;
opacity: 0.3;
z-index: 9999;
display: block;
position: fixed;
}
and following html code:
<router-outlet>
<div *ngIf="fetchingData" class="overlay">
<div class="spinner"></div>
</div>
</router-outlet>
There shouldn't be any way the image should appear twice, but in few devices the image is appearing twice vertically. I increased .spinner height to 100% and image appears thrice vertically along the page.
Setting background-repeat-y: no-repeat; has no effect either. If I reduce the height for .spinner to say 100px, I get just one image, but I doubt that might also break in few devices.
Any ideas why the image shows twice.
Related
I have a div which constains an image with diferent srcsets. I have set the div and image width and height to 100% so that the img embrace the whole page, so it is easy to assum that depending on the device screen it will show a bigger or a lower portion of the image when it doesn't fit on the div.
I'm ok with that, but the problem is that I want the image to be showed by the top so that if the height doesn't fit the 100% of the screen height and a part of the img gets cutted it is the bottom of it, but the img starts loading by the bottom and its the top the who gets cutted.
.portada {
width: 100%;
height: 100%;
}
#portadaImg {
height: 100%;
width: 100%;
object-fit: cover;
}
.portadaLetras {
position: absolute;
color: #FFFFFF;
font-size: 2em;
width: 33%;
min-width: 170px;
text-align: center;
background-color: #000000;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<div class="portada centerBoth">
<img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
images/portada/portada-l.jpg 1200w,
images/portada/portada-md.jpg 992w,
images/portada/portada-tablet.jpg 768w,
images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada">
<div class="portadaLetras">
Saint Paolo
<p>MMXIV</p>
</div>
</div>
Any idea what property am I missing?
Add the following property to the .portada class besides the ones I already had:
object-position: center top;
If you don't HAVE to use a srcset, why not use a background image instead of an image tag?
It would simply be:
.portada{
background: #000 url(../path/to/image.jpg) no-repeat;
background-size: cover;
}
Edit
I'm a little confused but if you are still willing to use a background image, perhaps the issue is with your Div styling.
Apply this CSS on the body tag instead...
body{
background: #000 url(../path/to/image.jpg) no-repeat center top;
background-size: cover;
}
You can do this by absolutely positioning your image inside a div with overflow: hidden.
The below image is 225px tall, but its parent div is only 160px tall, so it gets cropped from the bottom, leaving the top of the image alined with the top of its parent div.
.image {
position: relative;
overflow: hidden;
width: 378px;
height: 160px;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
<div class="image">
<img src="https://images.pexels.com/photos/52903/pexels-photo-52903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=225&w=378" alt="colored pencils">
</div>
A more generic solution that will replicate the effect of background-size: cover; background-position: top center would look something like this:
.image {
position: relative;
overflow: hidden;
width: 378px; /* or whatever */
height: 160px; /* or whatever */
}
.image img {
position: absolute;
top: 0;
left: -100%;
right: -100%;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
I have a problem, as situated in the image:
When I am scrolling down, the background image I have (the blue one) gets a white area, while that should be blue too. The blue background should be blue everywhere, yet because it's skewed and I am using it as a fixed background image, it does not work, somehow.
HTML:
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>
CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}
The white background you can see, is the body background. It should not be there, yet it is, somehow. When I would remove background-attachment: fixed, it works, yet I want to have it fixed as I am using parallax scrolling.
So it looks like transform: skewY(3deg); and background-attachment: fixed are blocking each other. I tried adding z-index and so on, but nothing is working for me at the moment.
Is there a way to fix this?
To fix so that slope only occur at the bottom, use a pseudo.
For the skewY() to transform upwards, use transform-origin: right top;, then set overflow: hidden to the wrapper to clip the upper part and the slope is only visible at the bottom.
html, body {
margin: 0;
}
body {
background: red;
}
.wrapper {
position: relative;
height: 200px;
width: 100%;
min-height: 1500px;
overflow: hidden;
}
.wrapper.nr2::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper div {
position: relative;
color: red;
font-size: 30px;
}
<div class="wrapper nr2">
<div>Some text</div>
</div>
<div class="wrapper">
<div>Some more text</div>
</div>
I have an img in a div set as a background with the following css:
#div1{
background: url(../img/img1.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: fixed;
z-index:-100;
}
This div dispalys the img perfectly in the center of the screen.
My second div with text has the following css:
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: -1;
position: relative;
top: 494px;
}
The divs display fine on my PC. However when I open the site on my mobile, the div with the text does not display. After zooming out you can see that the div is underneath the div with the img. Why is this so since the z-indexes are given and what can I do to change this?
Just increase the z-index value to positive.
#div2 {
min-height: 200px;
background: black;
opacity: 0.9;
width: 100%;
z-index: 999;
position: relative;
top: 494px;
}
I am trying to achieve frosted glass effect as described here: https://css-tricks.com/frosting-glass-css-filters/. In order to do this, I need to add :before element with the same background and apply blur effect.
Here's my HTML:
<div class="root">
<div class="content">
<p>Ok hello</p>
</div>
</div>
and CSS:
.root {
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
background-size: cover;
height: 400px;
}
.content {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: red;
padding-top: 16px;
padding-bottom: 16px;
}
.content:before {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center fixed;
background-size: cover;
opacity: 0.5;
/* -webkit-filter: blur(5px); */
}
Here's the pen: http://codepen.io/anon/pen/MKgbKR
I can't seem to position the background of :before element correctly. It is always shifted vertically. I tried playing with translation of this element, adjust the background, but to no avail. The problem can be easily noticed in the right part of the image, especially if you try resizing the resulting document vertically.
I am an absolute beginner in CSS, so I'm out of ideas. Your help will be appreciated.
EDIT: I think I should clarify my requirements. I need to keep the content block centered vertically regardless of window size changes. The image should remain centered and cover the background. The content never changes.
This might not show correctly on the snippet box, test it on your site and lmk
.root {
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
background-size: cover;
height: 600px;
}
.content {
position: relative;
top: 50%;
height: 200px;
transform: translateY(-50%);
background-color: red;
}
.content:before {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat center center;
background-size: cover;
opacity: 0.5;
-webkit-filter: blur(5px);
}
<div class="root">
<div class="content">
<p>Ok hello</p>
</div>
</div>
I have a webpage with an background-image with background-size:cover.
Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.
That's just one attempt that didn't work.
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons.
I hope you understand :-)
Best regards,
The One
Basically you can create a parent or wrapper element which would have the background image and then place all the elements like icons etc inside this and do all your positioning etc. So I've created this for you:
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
Here is an example on jsFiddle http://jsfiddle.net/j5cgt22z/
So each icon is positioned inside the container, the planets need to use position:absolute to float them around in the container space but the container needs to have position:relative so they are positioned in relation to their parent http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You can then use z-index on each position:absolute icon to stack each icon so the higher the z-index higher up the stack.
Hope this helps
After realising that there is no general solution for the problem yet. (object-fit isn't widely support).
I used the jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)