I have a background image which works fine for the most part, however after changing the view to an iPhone 11 for example in Dev Tools, I noticed that the background stops after a certain point. I have included the CSS where the image is held below, can I add anything to fill the gap?
.app::before {
content: '';
background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
I fixed this by adding overflow: hidden to my styling for all
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
Related
I am trying to build a page that will display a .png image of a computer (with a transparent screen), which I can then layer a website screenshot behind and scroll through, to give the effect of scrolling a real website.
For example, this page, but it can be with a scrollbar instead of automatic scrolling: http://preview.themeforest.net/item/fwrd-music-band-musician-wordpress-theme/full_screen_preview/12087239
I've actually managed to achieve the required, but I can only scroll the long website image (#instagram) when I 'inspect' the page. I assume the #laptop image is blocking the #instagram image somehow?
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}
You could use a pseudo element with pointer events none for your laptop and then just position your scrollable background where the screen is:
.laptop {
position: relative;
/* width and height of laptop image */
width: 584px;
height: 360px;
}
.laptop:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(https://pngimg.com/uploads/laptop/laptop_PNG5938.png) left top no-repeat;
background-size:cover;
z-index:2;
pointer-events:none;
}
.background {
/* width and height of screen */
width:414px;
height:229px;
overflow:auto;
position:absolute;
/*POsition of screen in image */
top: 28px;
left:82px;
}
<div class="laptop">
<div class="background">
<img src="https://www.fillmurray.com/412/600">
</div>
</div>
I will eventually have a grid of embedded YouTube videos on a grid that are each initially covered by an overlay that will contain information about the relevant video. On hovering over the overlay, it slides away, leaving the video visible.
The problem is that once the overlay is out of sight, the hover is no longer in effect, so the overlay returns if you even twitch the mouse over the video. I'm bound to be missing something stupid, but I can't for the life of me figure out what it is.
Here's the CSS
.vid-wrap {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
height: 0;
overflow: hidden;
}
.vid-wrap iframe, .vid-wrap .vid-overlay {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.vid-wrap .vid-overlay {
z-index: 1;
background-color: green;
}
.vid-wrap .vid-overlay:hover {
top: -100%;
transition: all .5s;
}
You can just add this CSS to fix your issue
.vid-wrap:hover .vid-overlay{
top: -100%
}
This should fix your problem.
http://cdpn.io/FykHr
I seem to have an issue with the combined CSS properties:
position: absolute;
bottom: 0;
First you can see that the .footer div doesn't isn't at the bottom. Now, change the font-size from 120px to 50px and the div seems to be working the way I inteded it to.
How do I make the .footer div stay at the bottom (not fixed at the bottom of the screen) regardless of the size of the .content div.
You need to add position: relative; to the parent container, which in this case is .wrapper.
Here's a good reference page on absolute positioning.
There is one way to do that:
body {
height: 100%;
margin: 0;
}
html {
padding-bottom: 50px;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: red;
}
http://jsfiddle.net/n8UNM/
There is still one limitation. You have to know height of footer and set it in two places.
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
.login .pane {
position: absolute;
top: 50%;
left: 50%;
margin: -128px -138.5px; /* half of the size in Google Chrome */
background: #f0f0fd;
background: rgba(240,240,253,0.90);
padding: 22px 32px;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
=== UPDATE ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
You're using absolute but I'd change that to fixed (this will work on both).
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle
I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll