I have a page where I want a full-screen background image. This works fine when the the body fits within the viewport, I have html { height: 100%; } and body { min-height: 100%; padding-top: 70px; ... background-size: cover; } (the top padding is for a page header). The issue arises when the page becomes larger than the viewport. The body stretches to the correct height, however the background attachment never grows larger than the size of the viewport. Here is a sample fiddle [https://jsfiddle.net/xdsgek6t/]. In the live version there is also an image overlay, but in the fiddle you can easily see the line where the radial gradient ends, even though I've told it to cover the body, which in this fiddle is 3000px tall due to a child element.
html { height: 100%; box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100%;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<body>
<header></header>
<div class="something"></div>
</body>
This ends up looking really strange when the page grows a tiny bit larger, and is really evident on mobile.
Remove height: 100%; from html and it will extend. And if you need min-height: 100% on body, you can use min-height: 100vh instead, and that will not rely on height: 100% on html
html { box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100vh;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<header></header>
<div class="something"></div>
Related
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>
section {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
padding: 40px 0;
color: #333;
font-size: 14px;
background-image: url("a.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-origin: content-box;
}
My css code but background starts at begining of website not under header? how can i solve problem
summary of problem
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.
My linear-gradient only goes to the bottom of the div.
Question How to make sure the body linear-gradient goes to full height of the page?
CODEPEN DEMO
CSS
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.header {
background: #FFFFFF;
width: 100%;
height: 50px;
}
.wrapper {
background: #F0F0F0;
min-height: 600px;
}
#media (max-width: 968px) {
.text-mobile {
text-align: center !important;
}
}
HTML
<div class="container">
<div class="wrapper"></div>
</div>
You need to set your html and body height to 100%;
html, body {
height: 100%;
}
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