When I place a div with a background-image property and use position: relative I end up with a white frame around the edge of the image which I do not want.
I cannot use absolute as I need an element to follow directly below the background image and scale on different resolutions (so no setting height/width in px).
Here's the CSS:
#pagehead{
position: relative;
background-position: center, center;
background-image: url("Header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
top: 0;
bottom: 0px;
left: 0;
right: 0;
}
section{
position: relative;
}
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="pagehead"></div>
<section>
<div id="content">
blahblahblah
</div>
</section>
</body>
</html>
Setting the body's margin to 0 might fix the problem:
body { margin: 0px; }
Related
I have a background image for a webpage that is too big, and in general, I want to prevent scrolling on the webpage. The HTML looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
and the CSS looks like
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body {
background-image: url("bg.jpeg");
background-size: cover;
background-clip: padding-box;
display: table;
}
This code mostly achieves the desired effect (background image looks good and scrolling is prevented); however, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) seems to introduce ~1px of white space around the right and bottom of the display area. I can get rid of the margin by doing something like padding: 1px instead of padding: 0, but then the scrollbars come back. Any ideas on how to get rid of this small whitespace while still preventing scrolling?
I tried adding a wrapper <div> for all the <body> content and setting the background and overflow properties on the <div>, but still didn't have luck (either got scrollbars or the odd small margins on bottom and right).
While I am not entirely clear why you get that white band(s) a slightly hacky workaround would be to put the background onto a before pseudo element which you make just slightly larger than the body.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
body::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100% + 1px);
height: calc(100% + 1px);
background-image: url(https://picsum.photos/id/1015/1024/1024);
background-size: cover;
background-position: center center;
background-clip: padding-box;
}
body {
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
Test
</div>
</body>
</html>
I found a solution to my problem but, I can't wrap my head around why this works. Why would I need the class car-back when my id image has the same code? If I take out the class car-back it no longer stretches my image like I want it to. All I really need is an explanation why I need the class car-back.
Here is my html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initail-scale = "1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div id="image">
<img src="WP_20131026_007.jpg" alt="" class="car-back">
</div>
<p>This should be poppins</p>
</body>
</html>
my css
#import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
body{
font-family: 'Poppins';
font-weight: 200 !important;
/*max-width: 100%;
background-size: cover;
background-repeat: no-repeat;*/
}
#image{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
}
.car-back{
width:100%;
height:100%;
}
#image is the container of the .car-back image. The #image settings apply only to that container.
width and heigth of .car-back (both 100%) are relative to its container , i.e. to #image.
Without the .car-back class and its particular settings, the .car-back image would be displayed at its original size instead of being 100% width and heigth of its container.
This question already has an answer here:
Why does the linear-gradient disappear when I make an element position:absolute?
(1 answer)
Closed 1 year ago.
It's my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Problem 01</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<img id="logo" src="./images/logo.png" alt="Code-Star logo"/>
</body>
</html>
and the styles:
body {
position: relative;
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
}
#logo {
position: absolute;
display: block;
background-color: green;
left: 50%;
bottom: 50%;
width: 100px;
}
I want to center the #logo element and create a gradient for body.
the first problem is that when I set position: absolute; for #logo element, the gradient doesn't apply to the body.
the second is that when I set position: relative; to the body, the #logo element doesn't align properly to the screen!
use flex style and also give a height to body
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #f3440e, #f02e08);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#logo {
background-color: green;
width: 100px;
}
<img id="logo" src="./images/logo.png" alt="Code-Star logo" />
I have the following rules in my css stylesheet:
body {
background: url('../Pic/poly-parallax Half.png') fixed center no-repeat;
background-color: rgb(231,231,231);
width: 100%;
background-size: contain;
background-position: left;
}
.logo {
height: 275px;
background: url('Pic/Logo.png') fixed center no-repeat;
background-size: 275px 70px;
background-position: top right;
}
But the logo image is keep on being responsive although i defined it as fixed.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="BSC1.css">
<title></title>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Examples:
zoom 100%:
zoom 200%:
The only thing you might want to change is the body's background-size from contain to cover to really fill the window (as I did below), but the logo does not change its size with those settings and always stays at the top right:
body {
margin: 0;
height: 100%;
background: url('https://placehold.it/1200x800/fa0') fixed center no-repeat;
background-color: rgb(231, 231, 231);
width: 100%;
background-size: cover;
background-position: left;
}
.logo {
height: 275px;
background: url('https://placehold.it/275x70/a0f') fixed center no-repeat;
background-size: 275px 70px;
background-position: top right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="BSC1.css">
<title></title>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Unsure how to explain this properly.
I have two elements on my web page that I need to properly align and resize together to match the browser.
The image isn't the current problem, but I have a second element that I cannot get to properly match and resize.
So, the top of my website will have an image that automatically sizes using this CSS code:
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;}
I need another element placed over top of that, covering part of the first image.
Since it will not let me post an image here, which would explain much better than just trying to describe by words, I have posted in here:
As you can see, I want to put the time box I have generated through javascript over the time from the top bar. When the browser resizes, I need it to maintain the position and size with the top image.
I have tried nesting it inside a div, but it seems it will not resize properly.
As per request, here is the code I currently am using:
HTML:
<!DOCTYPE html>
<html id="UbuntuDesktop">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script language="javascript" type="text/javascript" src="https://raw.githubusercontent.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<script language="javascript" type="text/javascript" src="js/time.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
</head>
<body>
<div><img class="top" src="Graphics\Ubuntu_Desktop_top_bar.png" />
<div id="udclock"><span id=curTime></span></div>
</div>
</body>
</html>
css:
#UbuntuDesktop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("Ubuntu_Desktop_12_04.png");
background-position: center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top {
position:fixed;
top:0;
left:0;
max-width: 100%;
height: auto;
z-inxed:0;
}
#udtopwrapper {
}
#udclock {
background-color: #4c4b47;
position:relative;
top:0;
right-margin:20px;
float: right;
text-align: center;
z-index: 1;
}
I don't think the js code will help. It is one that I found that will show the current time, and I am creating a dynamically changing time.
You can do something like this-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cssQ1.css">
<title>Document</title>
</head>
<body>
<header>
<p>Text here</p>
</header>
</body>
</html>
CSS
*{margin: 0;
padding: 0;}
header{background-image:url('download\ \(1\).jpeg');
height:100vh;
background-position:center;
background-size:cover;
background-attachment:fixed;}
p{color:white;
font-size: 200%;}