I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
Related
Just now I ran into a weird probelm, I have a fixed element with height:100%. Everything works well until I open Chrome Dev Tool and enter the mobile debug mode.I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too.
I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
height: 100% or min-height: 100% for html and body elements?
(2 answers)
Closed 4 years ago.
The question seems simple enough. Like a good little nerd I've done my research. Everything that I've found says that for something to have height: 100% every nested parent element must have a height for the child div to fill up. And that's exactly what I have.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
That's literally all my HTML. I JUST started this project, which is part of the reason I'm so bewildered. My CSS looks like this:
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
That's it. That's all my code. The background color of #content is exclusively so I can see the space it takes up. If I add text in the div or change its height to a pixel value in the CSS, the color shows up. If I switch it back to this, it disappears. Additionally, I'm working in Chrome and when I mouse over source in the Elements tab of the dev tools, both html and body are very clearly the height of the window. When I mouse over the #content div, I can see the style in the dev tools where it says height: 100%, but the height is 0px. I'm beyond perplexed. Any ideas?
In the body elementy, you need a "real" heightsetting - min-height: 100%; isn't sufficient as a reference for a relative child element height setting. So change min-height: 100%; to height: 100%; there.
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
P.S.: Your closing <body> tag was lacking the / character - I changed that to </body> in your code
In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.
I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.
I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.
When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.
A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.
Thanks for taking the time to read this.
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
width: 100%;
height: 100%;
}
body {
background-color: grey;
width: 100%;
height: 100%;
}
#titleSection {
width: 100%;
height: 15%;
text-align: center;
font-size: 10vmin;
}
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
}
.buttonWrapper {
width: 50%;
height: 100%;
display: inline-block;
}
.buttonImage {
height: 100%;
width: 100%;
object-fit: contain;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" href="" type="image/x-icon" />
<script src="code.js"></script>
</head>
<body>
<div id="titleSection">Who's going to set up the board?</div>
<div id="contentSection">
<div class="buttonWrapper">
<img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
</div><!--
--><div class="buttonWrapper">
<img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
</div>
</div>
</body>
</html>
Change it to this:
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
font-size: 0;
}
I am trying to make a full width (100%) header in black on the top of my page, the problem is that there is a border around it, which isn't blackwhat am I doing wrong?
This is my code (html):
<head>
<link rel="stylesheet" type="text/css" href="mainColorTest.css" />
<title>Home Color Test</title>
<div id="header">
</div>
</head>
This is my code (css):
body {
background-color: #ffbc36;
background-image: url('BackgroundWhiteMid.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#header {
width: 100%;
height: 200px;
background-color: #000000;
float: left;
}
Add this style :
body {
margin: 0;
}
Browsers usually add margin to the body, so that the content is not stuck at the borders. See fiddle of your example.
The body (and some other html elements) has default margin. That is the reason of the border.
You might have a margin on your body,
try adding
margin: 0px;
to
body {
margin: 0px;
...
}
Most browsers have some default css values on body and other tags.
You can avoid encountering problems with this kind of behavior in the future by using a css reset.
e.g.
http://meyerweb.com/eric/tools/css/reset/
So I'm trying to stretch the picture using the resize bar without changing the size of it. Also would help if I could somehow keep the aspect ratio too if you could. I have been searching for a few days and trying a bunch of different things. I'm a self-taught html. :( Can someone please guide me?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
text-align:center;
}
.asd{
width:500px;
overflow:auto;
resize:both;
}
.qwer{
background-color:blue;
width: 100%;
height:100%;
}
.asdf{
display:block;
}
</style>
</head>
<body>
<div class="asd">
<div class="qwer">
<div class="asdf"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQNn0ZQI8Xa1XrrCNdvIxslsIiIC67HmV6BxVTTgIhEPehwsDU7" width="225" height="225" /></div>
</div>
</div>
</body>
</html>
Idea
I'm not 100% sure what exactly do you want to achieve, but if you are looking for a way to make some sort of image resizer - this is how I would approach it.
You need an absolutely positioned image and a relatively positioned div.
Image sits inside the div, which acts as a clip mask. That gives you 2 benefits:
You can easily control the visible dimensions by adjusting the div size
You can stretch the img tag as much as you want.
Basic example
So in terms of a sample code - very basic.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
/* THIS IS THE KEY */
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<img class="child" src="kitty.png" />
</div>
If the stretching is to be dynamic - ie. can me changed, then you can now use javasript to change the {left, top} and {width, height} of the image to achieve the stretch effect.
If it's supposed to be static - always the same - you can just set the parameters in css.