This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
For some reason it was working before, but I haven't changed anything in these files, and the background-image stopped loading. I mocked up a codepen to re-produce the problem:
https://codepen.io/jamespagedev/pen/WYNPYv
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UI Project Wk - Home</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<div class="coming-soon">
<div class="notice">
<h1>COMING SOON</h1>
<hr>
<p id="countdown-clock" style="font-size:30px"></p>
</div>
</div>
</body>
</html>
CSS:
.coming-soon {
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: 50px auto;
width: 40%;
}
Can anyone tell me why background-image isn't showing up?
To use height: 100%; the parent element must have a defined height. In the codepen, adding this works:
html, body {
height: 100%;
}
Height of Html and body tag is not define. That's why your image is not render properly.
you need to add height of html and body tag.
html,body {
height:100%;
}
You can check updated codepen. link
seems you have given height:100% for .coming-soon class. Give the height value in px or pt instead of giving value in %.
For example.
.coming-soon {height:700px}
.coming-soon {height:100vh} /*Background will be applied for the whole vieport height.*/
Related
I've been stuck on this for awhile now. I have an answers-container div that's going to contain 4 rows, each with a checkbox and a button like this.
The problem is, I can't figure out how to get the width of the checkbox to be the same as the height, since if I set answers-container to be a grid and do grid-template-rows: 25% 25% 25% 25% the height of each answer will be correct but there's no way to set the width to be the same as the height. I know it's possible to do this in Jquery by manually grabbing the value of the height, but if possible I would like to find a solution in CSS.
I saw an answer that used a dummy div with padding set to a percentage which inherits that percentage from the parent, but I couldn't figure out a way to get that method to work while still keeping the button divs next to the checkboxes.
I don't have much code to share because I've deleted and rewritten this so many times, but this is the codepen:
https://codepen.io/TheNomadicAspie/pen/QWvWOgz
And this is what I'm trying to do:
.answers-container {
grid-columns: 2/3;
position: relative;
background-color: blue;
height: 100%;
}
.answer {
}
.checkbox {
}
.button {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 50%;
padding-top: 50%;
/* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
1:1 Aspect ratio<br/> width and height are always equeal
</div>
</div>
</body>
</html>
My web page uses a full page stretch background image. My problem is that the background image seems to be covering the top 10px banner/header I am trying to add in the form of a repeating background image (so I can use CSS opacity). Here's the full page:
<html><head>
<style type="text/css" media=screen>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 14px;
}
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
#banner{
background: url('images/banner2.gif');
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
padding:50px;
text-align: center;
}
</style></head>
<body>
<img src="images/background.jpg" id="bg">
<div id="banner">
Banner Test Text
</div>
</body>
</html>
I have tried adding z-index but to no solution. Any input for what I'm doing wrong is hugely appreciated. Please note that this implementation of the full page background image is the best I have achieved with my image, so it'd be great if a solution to accommodate that.
Ah, managed to get it myself. For any future readers of this, all I needed to do was add
position:absolute;
To the #banner code.
I am trying to center a block of dynamic height. I followed the nice guide at Vanseo Design and implemented the solution with negative margins. After a while of tweaking I got it to work in Chrome, but when trying in IE and Firefox the negative margins were way off! Chrome and Safari handles the position as expected, but not IE and FF. Had it been only IE I could have done a classic IE-CSS-hack, but with Firefox in the mix as well... Anyone who know how to get vertical cenetring with dynamic element to work in all browsers?
Screenshot from Chrome / Safari (Correct):
Screenshot from Firefox / IE (Wrong):
<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #000;
margin: 0px
}
#content
{
position: absolute;
top: 50%;
left: 0%;
height: 64%;
width: 100%;
margin-top: -32%;
text-align:center;
background-color:#339;
}
--></style>
</head>
<body>
<div id="content">
<div class="bodytext">This box should be centered vertically</div>
</div>
</body>
</html>
Well, you put a height of 64% for your element, so let do mats :)
100-68 = 36 ,., so there is only 36% left.
then devide this by 2 and you have 18
By putting your content ID to 18% from top and removing your margin, everything should work just fine. :)
#content
{
position: absolute;
top: 18%;
left: 0%;
height: 64%;
width: 100%;
text-align:center;
background-color:#339;
}
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
Thanks!
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Both background images are very wide (~2000px) so as to take up space on any sized browser.
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
#wrapper {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
It'll work with
background-position-x: 50%;
background-position-y: 0%;
and still add
background-position: center top;
for other browsers.
Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)
This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.
Create a wrapper ID to place in the body, then include the following CSS:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.
I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?
Can someone point me in the right direction? I don't see why I can't get the black_bottom.png as background in rounded corners.
#charset "utf-8";
/* CSS Document */
html,
body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;
}
.justyParagraph {
text-align: justify;
}
a img {
border: 0;
}
.clearer {
clear: both;
}
.rounded_corners {
background: url(../images/box/black_bottom.png) no-repeat left bottom;
color: #FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
<div id="blockdark">
<div class="rounded_corners">
Content
</div>
</div>
This is an example, maybe it has something to do with the JavaScript for rounded_corners class?
http://www.coldcharlie.nl/test
Be sure that ../images/box/black_bottom.png is the path from your stylesheet to the image file. Everything else looks correct, but people don't always realize that paths are relative to the css file and not the page that includes it.
Try an absolute URL there and see if it appears then. If it does, you know your relative URL isn't right.
EITHER:
Your image doesn't exist at this relative path: ../images/box/black_bottom.png.
OR:
Your image is blank.
OR:
Your image has more blank space in the image's left bottom corner than the dimensions of your div.rounded_corners, and therefore the background image "overshoots" your div.
HI...
This might give you something to have a look at...
<html>
<head>
<style type="text/css">
#mydiv{
background-image:url('http://www.theregister.co.uk/Design/graphics/std/logo_414_80.png');
}
</style>
</head>
<body>
<div id="mydiv">
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
</div>
</body>
</html>
Just something to get you started.
Also, your div#blockdark doesn't validate - use #blockdark instead...
(The id should be unique, so tag type doesn't matter)