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>
Related
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I want to make the image caption stick to the top of the viewport once a user scrolls the page, but it's not working. I would greatly appreciate the help, here is my HTML and CSS code:
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
</div>
html{
width: 100vw;
}
body{
width: 100%;
margin: auto;
}
h1{
position: absolute;
z-index: 5;
}
#img-div{
position: relative;
height: 778px;
width: 100%;
}
#image{
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption{
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
The problem is that the stickiness position occurs in the given code in relation to the containing element, not in relation to the viewport.
This snippet takes the caption out of that element and then it sticks to the top of the viewport. (Note, to make things scrollable body has been given height 500vh for this demo).
html {
width: 100vw;
}
body {
width: 100%;
margin: auto;
height: 500vh;
}
h1 {
position: absolute;
z-index: 5;
}
#img-div {
position: relative;
height: 778px;
width: 100%;
}
#image {
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption {
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
Map Page
Hi I'm making a map on my website and it needs to have icons on it that can be hovered which means they can't be apart of the actual map image itself.
I'm wondering how I would place the icons on the map and keep them in the same position on the map at different view widths/heights.
This is the CSS for my map background:
.background {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100vw;
height: 100vh;
background: url("../assets/map.png") no-repeat center center fixed;
-webkit-background-size: 100vw 100vh;
-moz-background-size: 100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}
The map will change size based on the resolution of the screen which makes it tricky for me to keep the icons in the same place through screen changes. Currently I tried using position absolute and putting it in the right place but as you change the screen so does the placement of the icon.
Am I doing it wrong or is there another solution to this? Thanks.
if you wanna position icons on a background then you have to give that background container a position relative and then give the elements inside background container a position absolute
body,
html {
margin: 0;
padding: 0;
}
.background {
position: relative;
width: 100%;
min-height: 100vh;
background-image: url('https://i.stack.imgur.com/KQxKh.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.icon1 {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon2 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #4AC144;
}
.icon4 {
position: absolute;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon5 {
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
<div class="background">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
<span class="icon5"></span>
</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.
repeat-x background image in 500px container div and how can I scale background image to page width. I am sorry for my bad English. Have a look at the following image to understand my case.
.container {
width: 500px;
height: 60px;
background-color:#f2d88c;
}
.menubg {
width: 100%;
height: 30px;
background-image: url(bg.jpg) center repeat-x;
}
http://jsfiddle.net/PjGqv/9/
Your div.menubg is a child of div.container The child element cannot be wider then its 500px width parent.
You can use absolute positioning if the parent elements position it is relative to has a 100% width. I've included a jsfiddle
However by using position: absolute; you are taking the child out of the parents container. Depending on your situation, you would have to adjust its position values.
.menubg {
position: absolute;
width: 100%;
height: 30px;
background-image: url(bg.jpg) center repeat-x;
}
You can use 3 elements and use this css
.container {
position: relative;
display: block;
height: 60px;
width: 100%;
text-align: center;
padding: 0;
}
.bg {
background-color: #f2d88c;
position: relative;
height: 60px;
width: 500px;
margin: 0 auto;
}
.menubg {
position: absolute;
width: 100%;
top: 15px;
height: 30px;
display: block;
text-align: center;
background-image: url(bg.jpg) center repeat-x;
}
<div class="container">
<div class="bg"></div>
<div class="menubg"></div>
</div>
Try adding:
background-size: cover;
to the .menubg
I have a page that needs to stretch and resize with with window and I've managed to do that but I need that the "inner div" (#pgContent) stretch if the window is resized to higher dimensions but that it doesn't shrink more than, let's say for example 800 x 600 px.
As I have it now it stretches well but it also shrinks more than I want!
It's working as I want in width but not in height!?
Here's a visual example:
My CSS:
* {
margin: 0;
padding: 0;
outline: 0;
}
/*| PAGE LAYOUT |*/
html, body {
height: 100%;
width: 100%;
/*text-align: center;*/ /*IE doesn't ~like this*/
cursor: default;
}
#pgWrapper {
z-index: 1;
min-height: 100%;
height: auto !important;
/*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
#pgContent {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 50px;
overflow: hidden;
background: #CCC;
}
#footWrapper {
z-index: 2;
height: 50px;
min-width: 940px;
position: absolute;
left: 30px;
right: 30px;
bottom: 0px;
background: #C00;
}
/*| END PAGE LAYOUT |*/
And the HTML:
<body>
<div id="pgWrapper">
<div id="pgContent">
This DIV should stretch with window but never lower than for example 800px x 600px!<br />
If window size is lower then scrollbars should appear.
</div>
</div>
<div id="footWrapper">
<div id="footLft"></div>
<div id="footRgt"></div>
</div>
</body>
If someone could give me a help on this I would appreciate.
Thanks in advance.
The second min-height will overwrite the first one.
Use a height of 100% and min-height of 680px;
#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
I belive height auto is messing with your stretching, commenting it out made your styles behave much better. Of course it might be down to different browsers
#pgWrapper {
z-index: 1;
min-height: 100%;
/*height: auto !important;*/
min-height: 680px;
/* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
Working sample:
http://jsfiddle.net/QqMeC/4/
Have you tried using the following in #pgWrapper
overflow: auto;
DEMO: http://jsfiddle.net/jonocairns/LA8hg/