I have a page with two lines background.
One line is yellow and has a height: 65%, another line is gray and has a height:35%
And I have an absolutely positioned div in center with fixed width and height.
The gray lines is right under my div. The problem is, when I change the size of my page, or zoom out(to simulate big size screen) my div appears above gray background. If I set height of each background line to 50%, everything is good, but I need 65% and 35%.
Here's jsfiddle link: http://jsfiddle.net/J2LTR/
Try to zoom out on a page and the black square will go above the gray background.
Any ideas how to fix this?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%
}
.yellow {
width: 100%;
height: 65%;
background: #e5bd00;
background-repeat: repeat;
}
.gray {
width: 100%;
height: 35%;
background: #d2d2d2;
background-repeat: repeat;
}
.wrap {
min-width: 300px;
width: 100%;
height: 100%;
min-height: 600px;
margin: 0 auto;
position: relative;
}
.center_box {
background: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -200px;
width: 400px;
height: 235px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="yellow"></div>
<div class="gray"></div>
<div class="center_box">some content</div>
</div>
</body>
</html>
your value for top and margin-top are not correct, cause it is based on center and your boarder is down 65%.
try this instead:
.center_box {
background: #000;
position: absolute;
top: 65%;/* the tune you need to start with */
left: 50%;
margin-top: -235px;
margin-left: -200px;
width: 400px;
height: 235px;
}
http://jsfiddle.net/J2LTR/1/
You could even use a linear-gradient on body if you want to include only young browsers : http://codepen.io/anon/pen/EImiz
Related
I have the following HTML for the outer div to centre and contain the back ground image. This works fine. I want to create a inner div relative to the image size to place the div in a black square in the image. the image size is 1783x1481 and the corners for the inner div should be TopLeft: 397,318 TopRight: 1140,318 BottomLeft: 397,903 BottomRight: 1140,903
I'm not sure how to approach this, do I use percentages? do I use view-height scaling?
#outer {
position: relative;
background-image: url(https://jrwr.io/terminal.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: block;
}
<div id="outer">
<div id="inner">Example Text here</div>
<div>
You can see a example of this issue at my website jrwr.io and/or from this video on imgur
If you want to scale the image with viewport without distorting it you can use aspect-ratio property:
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(78, 3, 78);
overflow: hidden;
}
#outer {
position: relative;
background-color: rgb(78, 3, 78);
background-image: url(https://i.stack.imgur.com/QhkFU.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto;
width: calc(min(100vw, 120vmin - 10px));
/* aspect ratio calculates the height */
aspect-ratio: 1.2/1;
}
#inner {
position: absolute;
top: 21%;
left: 22%;
width: 42%;
height: 40%;
background-color: black;
font: 2vmin monospace;
color: limegreen;
}
<div id="outer">
<div id="inner">
<br>
<p> Testing Terminal</p> > <span>ping www.google.com -t </span></div>
</div>
Here, width is set to calc(min(100vw, 120vmin - 10px)).
If viewport height(vh) > viewport width(vw), then vmin = vw, and 100vwwill be used and image height will be calculated automatically as per the aspect ratio (1783/1481=1.2).
If vh < vw then, vmin = vh. And width will be set to 120% of vh. -10px is used to avoid scroll bars. You can use overflow:hidden on body.
Is this what you are getting at? I built it with half the size so it would fit better in snippet but actual values are in there, just commented out.
.outer {
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
top: 0;
background-image: url("https://i.stack.imgur.com/cTRdU.jpg");
opacity: 1;
margin: 0 auto;
}
.inner {
background: black;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
position: absolute;
border: 1px solid white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
If you want to centre align the DIV then you can go for display: flex?
.outer {
display: flex;
align-items: center; // vertical center
justify-content: center; // horizontal center
}
https://stackblitz.com/edit/web-platform-vxi2dd
I'm trying to fit a small image into a larger div.
html, body {
height: 100%;
width: 100%;
}
/*About Us Page*/
.bgimage {
width: 100%;
height: 100%;
position: relative;
}
img {
max-width:100%;
max-height:100%;
}
#aboutus {
width: 250px;
height: 250px;
background-color: rgb(82, 63, 51);
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
border-style: groove;
border-color: rgb(75, 58, 36);
border-width: 20px;
margin: auto;
}
<html>
<head>
<meta charset="UTF-8">
<title>The Hewitt's Den: About Us</title>
<style>
#aboutus {
text-align: center;
}
</style>
</head>
<body>
<div class="bgimage">
<div class="navi">
<img class="AboutUsPic" src="https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&ext=jpg">
</div>
<div id="aboutus">
<h1>About Us:</h1>
</div>
</div>
</body>
</html>
The image is too small to fit into the div, I could manually change the size of the image, but I want it to automatically fit, to accommodate other screen sizes. If it's possible, maybe it could maintain it's width-height size, to avoid looking stretched or compressed.
For img elements use object-fit: cover and in your case like this:
img {
width: 100%;
/* max-width: 100%; */
max-height: 100%;
object-fit: cover;
}
object-fit only works if you make the img element capture the full dimensions first - full width of its parent div in this case.
Working codesandbox
CSS background-image
background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
You should use property width: 100% for image element like this:
img {
width: 100%
}
I'm a beginner and I was playing around with css (code given below)
and I set the yellow div to a 1000px and I thought the blue div would automatically
wrap around it given height:100%;
but to my surprise the yellow div seemed to overflow, I tried using the overflow:auto; but it added a scroll bar to prevent the overflow (which is not what I needed)
so is there anyway that the parent blue div always completely wraps around the yellow div no matter if i set it to a 1000px or 100% height using only CSS?
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
height: 100%;
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
left: 50%;
transform: translate(-50%, 0%);
background: yellow;
height: 1000px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
</body>
</html>
Try like below:
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
min-height: 100%; /* update here */
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
margin: auto; /* remove absolute and center with margin */
background: yellow;
height: 1000px;
}
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
I'm practicing with web development and I have a very weird problem with HTML and CSS.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<!--<div id="friendRequests"></div>-->
<div id="friendRequests"></div>
<div id="chatScreen"></div>
</body>
</html>
As you can see, #friendsList and #friendRequests are exactly the same. Note the line after the div that has been commented out, it has the id friendRequests. When I load the page, the div doesn't show up. But here is where I get confused. If I change the id of that div to friendsList, it does show up, but those two identities have exactly the same properties (I did this just to debug, friendRequests will have other properties). I even commented the friendsList out in CSS and I even removed it, it still doesn't change. Can someone explain to me why this apparently only depends on the name of the id? Thanks!
Big Update:
Apparently the script works perfectly fine in Microsoft Edge, so the problem lies in Chrome. Using Element Inspector, I discovered that the #friendRequests is actually never loaded in Chrome!! What might be the issue here?
Both divs #friendsList and #friendRequest are set with position: absolute; and float: left;.
This means both will be aligned to the left side of the screen regardless of other elements. As a consequence, both divs are on top of each other and only one is visible (specifically the one which is defined later in html).
You should remove the position: absolute from the divs. Or make them relative, so they are aligned next to each other, depending on the order in the html.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
text-align: center;
height: 50px;
width: 60%;
background-color: blue;
position: relative;
}
#friendRequests {
float: left;
height: 100%;
width: 20%;
background-color: red;
position: relative;
}
#friendsList {
float: left;
height: 20%;
width: 20%;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests"></div>
<div id="friendsList"></div>
<div id="chatScreen"></div>
</body>
</html>
The reason for this is both the div are having same css when you use the same id because of which the divs are overlapping on each other.
The id should be unique.
To understand the difference, I have shifted "friendRequests 2" block a bit left.
html {
height: 100%;
}
* {
margin: 0 auto;
}
body {
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, #71c7d1, #417e8a);
height: 100%;
position: relative;
}
#banner {
right: 20%;
position: absolute;
text-align: center;
height: 50px;
width: 60%;
background-color: #3231ff;
}
#friendRequests {
position: absolute;
float: left;
height: 100%;
width: 20%;
background-color: #3231ff;
}
#friendsList {
position: absolute;
float: left;
height: 20%;
width: 20%;
background-color: #3231ff;
}
.left_block{
left: 21%;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="chatscreen.css">
</head>
<body>
<div id="banner"><h1>Welcome to your TicTac</h1></div>
<div id="friendRequests">friendRequests 1</div>
<div id="friendRequests" class="left_block">friendRequests 2</div>
<div id="chatScreen"></div>
</body>
</html>
Thank you for answering, I found the solution. The problem wasn't the script, it was my browser apparently. Like I commented a few times, loading the page in Edge worked perfectly fine. I discovered using the debugger tool that the CSS file wasn't loaded completely for one or another reason. Thus I suspect this might be a bug in Chrome.
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}