Good morning,
I have a problem with scrolling my website on mobiles. I have set div height to 100%, but on mobile, it has height 'auto'. But still, when text is longer than the screen height, I am unable to read it. How should I edit it please? Thank you!
HTML:
<div id="about">
<div id="onas">
<div id="obsah">
<p> text text text....</p>
</div>
</div>
</div>
CSS:
#about {
background:url('images/bg-about.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
min-height: 100%;
width: 100%;
color: white;
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
z-index: 1;
}
#obsah {
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
color: black;
font-size: 21px;
}
#onas {
position: absolute;
font-family: cond;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, .5);
min-height: 40%;
}
#media screen and (max-width: 1024px){
#onas {
position: static;
margin-top: 200px;
padding-top: 15px;
width: 100%;
height: auto;
min-height: 40%;
}
}
Your problem is that you have:
position: fixed;
In your about, you were probably trying to apply it to the background.
Delete that line and it will scroll.
docs
Related
I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?
My site:
https://wandawix.github.io/online-zoo/index.html
My code:
https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}
Try using this:
.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
#media only screen and (min-width: 968px) {
height: 75vh;
}
}
And see if this works
i want to use z-index for text and overlay.
https://jsfiddle.net/osm2rkbx/1/
it is my code.
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mainArea p {
display: flex;
height: 50vh;
font-size: 1.5rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 2px 2px 4px #000000;
z-index: 999999 !important;
}
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
<div class="mainArea">
<div class="container">
<div class="col-md-12 text-center ">
<p>its the text..</p>
</div>
</div>
<div class="mainAreaOverlay"></div>
</div>
when i use z-index for text, its not working. It seems pale. How can i see text with white. İf you help me i will be glad, thanks.
Put z-index:-1 in mainArea class and update z-index:-1 to mainAreaOverlay class.
Old mainArea class:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Updated:
.mainArea {
background: url('https://c.wallhere.com/photos/94/68/1920x1000_px_landscape_photography_reflections_river-1002111.jpg!d');
height: 50vh;
width: 100vw;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1;
}
Old mainAreaOverlay class:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
z-index: 1;
}
Updated:
.mainAreaOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: -1;
}
I have quite simply code and i've spent a day for solving problem, but still no progress :/ I want to display iframe with background-image. Snippet code is not showing background-image, so You can see live demo here: http://lukdan2.47.pl/index2.php
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}
<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>
As You can see iframe has too much height. I can add
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}
and it works fine.
But, for screen lower than 460px parent div is getting smaller so static height for child is not working correctly.
I've tried to change parent div to display flex and table (and change child div also) but nothing found that will solve my problem.
Help, please.
Ok, i've found solution.
.iframe-container {
padding-top: 56.25%;
position: relative;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.iframe-container iframe {
border: 0;
height: 62%;
left: 40%;
position: absolute;
top: 0;
width: 20%;
margin: 0 auto;
padding-top: 11%;
padding-bottom: 0%;
}
<div class="iframe-container">
<iframe src="http://sshtest.co.pl/"></iframe>
</div>
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
The header on my website contains an image set as the background, with the HTML output as below -
<div id="header-container">
<div class="inner">
<h1>
<a title="Go home..." href="http://home_url">Blog title</a>
</h1>
</div>
</div>
The method works just fine, but I'm having issues with mobile devices as my header image is 432px wide.
Because of this I need to amend the code below so that the image reduces in size should the available width of #header-container .inner be less than the width ofthe background image.
I've tried several things, including using background-size: cover; and max-width, but I cannot seem to find a working combination.
How can I overcome this issue?
Here is a JS Fiddle showing the issue. Just reduce the size of the rendered view to see that the image does not shrink.
And here is the CSS that I am using -
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
-moz-background-size: 432px auto;
-webkit-background-size: 432px auto;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#header-container .inner h1 a{
display: block;
height: 85px;
text-indent: -9999px;
width: 432px;
}
You should use background-size: contain, not background-size: cover, in combination with min/max-width.
Change your CSS like this.
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
height: 85px;
margin: 0;
max-width: 432px;
}
Sample snippet
#header-container{
background-color: #053525;
border-bottom: 1px solid #4DC386;
padding: 10px 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
#header-container .inner{
margin: 0 auto;
max-width: 1000px;
position: relative;
}
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
max-height: 85px;
margin: 0;
max-width: 432px;
position: relative;
}
#header-container .inner h1:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
<div id="header-container">
<div class="inner">
<h1>
</h1>
</div>
</div>
#media query might help here:
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#media (max-width: 432px){
#header-container .inner h1{
background-size: cover;
}
}
You can use media queries for mobile devices. Like:
#media all and (max-width: 540px){
#header-container .inner h1{
-moz-background-size: 260px auto;
-webkit-background-size: 260px auto;
background-size: 260px auto;
width: 280px;
}
#header-container .inner h1 a{
width: 260px;
}
}
You can force this by avoiding the background image altogether as you replace it with a regular image in the <img> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.
#z1 {
z-index: 1;
}
#z2 {
z-index: 2;
padding: 5%;
color: white;
}
#z1, #z2 {
position: absolute;
left: 0px;
top: 0px;
}
<div id="outer">
<div id="z1">
<img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
</div>
<div id="z2">
<p>I'm on a boat!</p>
</div>
</div>