This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I want to set a full size div in css but it keeps set margin.
As you can see, the background color i set on html is still visible.. how can you avoid this and make my div full size?
body,
html {
height: 100%;
background-color : red;
}
#front-bg {
background-image: url('https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front-bg h1 {
color: white;
font-size: 5em;
width: 100%;
position: absolute;
bottom: 15%;
text-align: center;
}
<!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>My site</title>
</head>
<body>
<div id="front-bg">
<h1>Stack Overflow</h1>
</div>
</body>
</html>
try
body,
html {
height: 100%;
background-color : red;
margin: 0;
}
Related
This question already has answers here:
Is there an equivalent to background-size: cover and contain for image elements?
(14 answers)
Closed last year.
How to make a normal image (be it 'img' or 'svg') behave exactly like a 'background-image' ? I mean, covering the whole screen and getting cropped to never display borders ?
Only 'css', no 'js'.
I tried this, mostly from img behaving like a background img?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg" style="position:fixed; z-index:-5000; top: 50%; left: 50%; margin-left: -960px; margin-top: -540px" >
</div>
</body>
</html>
The "demo.jpg" image is 1920x1080.
It works somewhat, but the top picture doesn't get "squeezed" if the window gets too narrow.
So I tried the proposed approach below :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg">
</div>
</body>
</html>
Which looks like it is working.
The main purpose is to add a clickable map area to the background image. But since it is a "background image", nothing can be clicked.
The map works at that point, goal reached.
Yet I tried the 'img' approach with a 'svg' instead, but the 'a href' just doesn't work like expected :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.svg">
</div>
</body>
</html>
If I copy the 'svg' directly, it then refuses to get "cropped", it is always "contain" :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
svg {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<svg viewBox="0 0 1920 1080" >
<a href="https://www.google.fr/">
<rect x="351" y="797" fill="#777" opacity="100%" width="92" height="42">
</rect>
</a>
</svg>
</div>
</body>
</html>
Any idea ?
use object-fit:cover
img {
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
<img src="https://picsum.photos/id/1069/1000/1000">
This question already has answers here:
background-image doesn't appear if <div> is empty?
(9 answers)
Background-image inside div not showing up
(2 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="Project9.css">
<link rel="icon" type="image/png" href="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-camera-512.png">
</head>
<body>
<div class="back">
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.back{
background-image: url(images/bg.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
Back ground Image does not show up in (.back) div but it does work on body tag.
I've checked the name of the file and everything but it shows up blank.
You have to give the div a width and a height:
.back{
background-image: url("https://picsum.photos/200/300");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
height: 100px;
width: 100px;
}
<div class="back"></div>
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 am using the following code to create a background image for my site. It is working and making it a full screen background, However, It shrinks my image up, I am not understanding why. It looks like it takes about an inch off of every side.
Here is the code, directly from CSS tricks
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
here is my full css
/*!
* Start Bootstrap - Full HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
* {margin: 0; padding: 0;}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
html {
background: url('/images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#thanks {
position: absolute;
width: 300px;
height: 75px;
z-index: 15;
top: 98%;
left: 50%;
margin: -100px 0 0 -150px;
text-decoration: none;
text-align: center;
font-size: 36px;
background-color: #3a1e49;
color: #edcd05 !important;
font-family: "Times New Roman", Times, serif;
border-radius: 25px;
}
#thanks:hover {
background-color: #edcd05;
color: #3a1e49;
}
#thanks a {
color: #edcd05;
text-decoration: none;
position: relative;
bottom: 10%;
}
#thanks a:hover {
color: #3a1e49;
}
Below is the HTML
<!DOCTYPE html>
<html class="full" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Demo</title>
<link href="css/full.css" rel="stylesheet">
</head>
<body>
<!--
<div id="thanks">
<p>Share a Memory</p>
</div>
-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
you made your image cover this means it will extend over the screen.
make sure that your image is larger than (or equal) your screen resolution.
for EX:
if your screen resolution is 1024 * 728 then the image width should be larger than 1024 and the height 728.
I want to make a page,which by scroll down ,the content div ,cover the back ground image.so I put a background image for body and create 2 divs, it works in big window size, but when I change the size of window, and make it smaller (to test the responsive), there is a white gap between image and content div.
Would you please help me to remove it?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>first</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="css/first.css" rel="stylesheet">
<style>
body{
background: url("https://kalamarie123.files.wordpress.com/2012/03/img_7815-2.jpg") no-repeat top center fixed;
background-size:100%;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="content">Lorem Ipsum is simply dummy text of </div>
</body>
</html>
.cover{
height: 1232px;
width: 100%;
margin: 0;
padding: 0;
color: white;
text-align: center;
}
.content{
width: 100%;
height: 100%;
background: gray;
margin: 0;
padding: 0;
}
You need to make the body and the html go to the bottom of the page:
body, html {
min-height: 100%;
}
and then set the background to background-size: cover;: https://css-tricks.com/perfect-full-page-background-image/
You could do something like this:
<div id="yourdiv"></div>
#yourdiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope it helps!
Sounds like it's probably due to your background image not filling the full space available.
Try adding this to the body (the element with the BG image);
background-size:cover;
Note that this will not work well on old browsers