What is the recommended way to add a background image to the body (more precisely .content) of a ratchet-based app? The ios theme feels a little plain to me.. is it bad practice to give an app a background image?
I did this and it is working well for me on iOS ( even iPad ) and Android.
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-image: url("../img/background-mobile.jpg");
background-position: center top;
z-index: 1
}
Related
i've problem when convert html to pdf with pdf-creator-node. when i uses ul li with column=2, in preview html is look good. but when i generated to pdf always preview in one column. may i help me ? this is my css
.itenerary ul{
display: block;
list-style-type: disc;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
line-height:1.6 ;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
i want to get tips and trick to solve my problems
I'm using styled components to put a background image on my react app. I have a background container and also a background component to create a background image with some gradient of some sort. My problem is when I go open my site in mobile view and bring up the soft keyboard, it pushes the background image up which can get annoying after a while.
const BackgroundContainer = styled.div`
-blur-radius: 20px;
position: absolute;
width: 100%;
height: 60vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #6e7290;
z-index: -1;
&:after {
--color-background--rgb: 103, 103, 171;
content: "";
position: absolute;
height: 50%;
left: 0;
right: 0;
bottom: 0;
background: transparent;
background: linear-gradient(
0deg,
rgba(var(--color-background--rgb), 1) 0,
rgba(var(--color-background--rgb), 0.987) 8.1%,
rgba(var(--color-background--rgb), 0.951) 15.5%,
rgba(var(--color-background--rgb), 0.896) 22.5%,
rgba(var(--color-background--rgb), 0.825) 29%,
rgba(var(--color-background--rgb), 0.741) 35.3%,
rgba(var(--color-background--rgb), 0.648) 41.2%,
rgba(var(--color-background--rgb), 0.55) 47.1%,
rgba(var(--color-background--rgb), 0.45) 52.9%,
rgba(var(--color-background--rgb), 0.352) 58.8%,
rgba(var(--color-background--rgb), 0.259) 64.7%,
rgba(var(--color-background--rgb), 0.175) 71%,
rgba(var(--color-background--rgb), 0.104) 77.5%,
rgba(var(--color-background--rgb), 0.049) 84.5%,
rgba(var(--color-background--rgb), 0.013) 91.9%,
rgba(var(--color-background--rgb), 0)
);
}
`;
const Background = styled.div`
--blur-radius: 20px;
background-image: url(${reviewssw[0].Image});
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: calc(var(--blur-radius) * -1) calc(var(--blur-radius) * -1);
background-size: cover;
background-position: 50%;
mix-blend-mode: overlay;
filter: blur(var(--blur-radius));
`;
I've been searching for a way to do this effect: http://www.discovershadow.com/
Especially the iPhone reveal part at the bottom where the iPhone stays but the content inside changes at the same time as the background.
Can this be achieved with only css or is it something much more complicated?
This is the way that I found to do this... no one seemed interested in the question but I hope you like the answer:
<html>
<head>
<style>
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: 100%;
overflow-y: scroll;
position: fixed;
}
.items {
width: 100%;
height: 102%;
background-attachment: fixed;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
}
#box1 {
background-image: url(yourimage1.png);
background-color: #03F;
}
#box2 {
background-image: url(yourimage2.png);
background-color: #609;
}
#box3 {
background-image: url(yourimage3.png);
background-color: #3C0;
}
</style>
</head>
<body>
<div id="container">
<div class="items" id="box1"></div>
<div class="items" id="box2"></div>
<div class="items" id="box3"></div>
</div>
</body>
</html>
Yes can achieve that... You have not added any code or not even tried i think. Here is simple code for you to get you started.
.a
{
background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg');
height: 200px;
width: 100%;
position: fixed;
}
p
{
color : #000;
font-size: 72px;
position: relative;
z-index: 999;
}
fiddle
This effect does require CSS + Javascript, there is no way to do it effectively without using these technologies. You could have the iPhone centred on screen and the rest of the screen move around it but it wouldn't create such as nice effect as seen on the website.
I would personally recommend looking at the source of the target website and investigate yourself how it was achieved, never hurts to have a sneek peek at source from other websites.
Looking at that sites script.js page they handle scrolling with
// handle scrolling
$window.scroll(function() {
handleScroll();
});
Which does this. You will need to look at the full code to work out exactly how its done.
// handle scroll
function handleScroll() {
scrolledWin = getPageScroll();
$body.addClass('scrolling');
// show logo
if((scrolledWin * 1.5) > winH) {
$body.addClass('content');
}
// show navigation
if(scrolledWin > 50) {
$body.addClass('scrolled');
}
// app img animation
if(topOff >= scrolledWin) {
$appImg.removeClass('sticky');
} else {
$appImg.addClass('sticky');
}
if(topOff2 >= scrolledWin) {
$appImg2.removeClass('sticky');
} else {
$appImg2.addClass('sticky');
}
// fix navigation issue on top scroll
if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a2');
} else if ($('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a1');
}
//fix navigation issue between how it works and next section
if ($s9.hasClass('inViewport')) {
if ($('#hook5').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a5');
} else {
$nav.attr("class", "").addClass('a4');
}
}
//fix navigation issue between Experts and next section
if ($sExperts.hasClass('inViewport')) {
if ($('#hook6').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a6');
} else {
$nav.attr("class", "").addClass('a5');
}
}
}
Ref: http://www.discovershadow.com/js/script.js?v=2.14
I have two probably easy CSS questions here:
http://web288.merkur.ibone.ch/klingler/
How can I get the © Klingler Fahrzeugtechnik AG 2013 in the footer vertically aligned to the bottom? I tried align-bottom and vertical align of the p tag but without luck...
The second thing is, I feal the distance between the lines of the main text is a bit narrow. I wanted to have a bigger line height. I tried changing the line-height property of the p tag to 2.5em instead of 1.5em but this did not change anything? Why is this?
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
Do this:
footer {
position: relative;
}
.ym-g25 {
position: absolute;
bottom: 0;
}
Do this:
.ym-g25 {
width: 25%;
vertical-align: bottom;
display: table-cell;
line-height: 1;
float: none;
}
I'm trying to position a child element behind it's parent:
<div><p>test</p></div>
My CSS is:
div {
width: 100px;
height: 100px;
background: red;
z-index: 2;
}
div p {
position: relative;
z-index: 1;
}
The z-index of the <p> is lower than it's parent z-index, but it is displayed in front. Why is that?
The div and the p in the example exist on different stacking contexts, and the div's z-index tells it to appear two levels higher than its siblings, not its children.
However, an element's z-index that is below zero puts it behind its parent.
Giving the p a z-index of -1 puts the p behind the div, regardless of the div's z-index.
If that's possible in your situation, you need to prevent stacking context on the parent. To do so, remove the z-index from your <div/> and set the <p/>'s z-index to -1:
div {
width: 100px;
height: 100px;
background: red;
/* z-index: 2; */
}
div p {
position: relative;
z-index: -1;
}