I want to create an overlay that I will use behind a popup. But when the page is scrolled down the overlay is no more there? I can use javascript to get the height of page's content and then can apply same height to overlay but is there any css based solution?
#overlay{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color:#000;
opacity: .75
}
just change the position attribute to fixed.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
Try that, i'm not sure if it works on anything but backgrounds but its worth a shot!
Related
I've configured a full screen background image with CSS like this:
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.
Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.
Here's one way to achieve this with CSS variables. First add this to your <head>:
<script>document.documentElement.style.setProperty('--original-viewport-height', window.innerHeight+"px")</script>
Now you can set the min-height of your background element to var(--original-viewport-height).
Here's an example of the code that I'm using:
body {
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
background-image: url(img.png);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
min-height: var(--original-viewport-height);
left: 0;
top: 0;
will-change: transform;
z-index: -1;
}
(As you can see, in my specific case the background is on the ::before rather than directly on the body to solve the jittery scrolling issue with fixed backgrounds in Android Chrome.)
Link to the site is
I have an image with size cover as soon as you enter the page. In order to make it available in every browser (I was having troubles with Opera mini and Android browser) I added this code to the div element:
.portada{
width: 100%;
height: 100%;
position: fixed;
padding: 20px 10px 60px 10px;
height: 100vh;
top: 0;
left: 0;
z-index: 0;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
However, now, because of the position: fixed; when I keep adding content into my page, bellow that section, it displays under the picture and I can´t see it. It is destroying my page. And as soon as I take out the position: fixed; code, it goes back to not displaying the image full screen in Opera and old Android browser.
I want to be able to create more content and scroll down the page.
I have tried with position:relative; but it goes back to not working on Opera mini. It displays the image full width but with minimum height.
Any help? Thanks!
I think I finally found the solution. I added to the .portada class min-height: 300px; and now at least in those browsers the image is a little bit bigger and it does the job. I also took out the width and height properties so the final code of the class is:
.portada{
position: relative;
min-height: 300px;
z-index: -1;
padding: 20px 10px 60px 10px;
height: 100vh;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
Looks like it works good in every browser I can test.
This is because you display your image as a background and your div.portdata is empty. Try inserting the image using img html tag.
Been playing around with CSS and for some reason I can't get the image to cover the whole screen. I managed to dip the opacity but the image won't cover the screen.
<div class="backgroundImage">
<img src="Image/BackgroundImage.jpg">
</div>
.backgroundImage{
opacity: 0.4;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However if I use the code below I can make it to cover the whole screen, but the opacity won't dip. So for some reason it is not working on a div.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.
.backgroundImage {
background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
background-position: center bottom, left top;
-webkit-background-size: 80px 60px, cover;
-moz-background-size: 80px 60px, cover;
-o-background-size: 80px 60px, cover;
background-size: 80px 60px, cover;
background-repeat: repeat-x, no-repeat;
width: 100%;
height: 100vh;
}
In your case the img tag is not closed. It should look like this <img src="Image.jpg">.
Further you can not specify the dimensions of an img with background-size: you should use width: and height:.
You can use CSS pseudo elements of either :before or :after and set the background image + opacity to it. You can either set everything to height:100%, or just use height:100vh on the div directly in order to make it to cover the whole viewport height.
Jsfiddle Example
body {
margin: 0;
}
.container {
position: relative;
height: 100vh;
}
.container:before {
background: url("https://unsplash.it/500") center / cover;
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: -1;
opacity: 0.5;
}
<div class="container">Yes!</div>
Here is a demo of it: https://jsfiddle.net/a1wvdpwc/17/
I think that's the effect you want?
Just give the background div a width and height of 100%, and give it a position of fixed. Then give it a Z-index of very low so it stays at the very back. You then need to also give the image a height and width of 100%, so that it fills up the viewport. (In the demo I used vh and vw; which mean viewport-width and viewport-height, as percentages. )
Also the demo is in scss, but the only difference is that the css Img placed inside the backgroundImage styles uses a descendant selector, so it targets all Img elements that are descents of div.backgroundImage. I've put what the compiled css would look like in this answer.
Also sorry for the lack of indentation. I typed it up on a phone. I'll update it with a neater version in a few hours.
The html is:
<div class="backgroundImage">
<img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
Content here
</div>
The css is:
.backgroundImage {
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100vh;
Height: 100vh;
Opacity: 0.25;
Z-index: -5000;
}
.backgroundImage img {
width:100vw;
height: 100vh;
}
.content {
padding: 30px;
}
Also I forgot to add, (to the best of my knowledge) this method is not too good for semantics, but it shouldn't be too bad if you use it.
I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.
Hey I think i'm doing something wrong because everyone says you can stretch an image using:
background-size: cover;
But when I use it, one or two sides are always getting cropped. I actually want a way to distort the image so it stretches to fit any screen responsively. Is that possible? Here is the exact code i've tried (i've tried a lot of variations of this):
.carnival {
background: url(../images/carnival.jpg) no-repeat 50% 50%;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
left: 0;
right: 0;
position: absolute;
}
html:
<div class="carnival"></div>
Also for some reason if I remove any of the below the background doesn't show up at all:
height: 100%;
left: 0;
right: 0;
Any help would be greatly appreciated. Can't believe how complicated setting a background image is for me.
Try background-size: 100% 100%; instead of cover.
cover will cause the background image to be scaled so that it fills the block dimensions,
cropping any excess width or height depending on the miss-match between the aspect ratio of
the background image and the block to which the image is applied.
body {
margin:0;
}
.carnival {
background: url(http://placekitten.com/700/1400) no-repeat;
background-size: 100% 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
}
<div class="carnival"></div>