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>
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:
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;
}
The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.
I don't know if the problem is in the css or the html file.
body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Because you set background-image for two element (html and body). A simple webpage layout like this:
<html>
<head>
</head>
<body>
</body>
</html>
You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.
body{
margin: 0;
padding: 0;
background-image: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
add this media code
#media screen and (max-width:500px){
body, html {
background-size:100% 100%;
}
}
You don't need to set bckgound for html and body. Only set the background for body.
body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
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
How would one ensure that certain content is always fitted inside a particular area of a web page?
As an example, I would like the sentence "Fit this inside" to appear inside of the background image. Here is my test.html file:
<!DOCTYPE html>
<html lang="en">
<link href="test.css" rel="stylesheet" type="text/css">
<body>Fit this inside</body>
</html>
Here is my test.css file:
body
{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
This results in the text "Fit this inside" appearing at the very top of the page, and not inside the background image area.
What is the correct method to do this?
JSFiddle: http://jsfiddle.net/u3TAF/
Look at my comment higher.
You've set the background image to be 68% height. set the text into container with same properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
body
{
background-image: url('image.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
}
div.container {
position:absolute;
top:16%;
height: 68%;
left: 0%;
overflow:auto;
}
</style>
</head>
<body>
<div class='container'>
Now it's fit!
</div>
</body>
</html>
I think the best option would be to put the text within a DIV and then apply the styles to that element. Somewhere along the lines of:
<html>
<head>
<style type="text/css">
#test{
background-image: url('bg_img.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:100% 68%;
overflow: scroll;
}
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>
The background image should be given to the parent element. In your case, in the CSS, attach the background image property to the <html> element. So this image would act as a background to all the content of this page.
If that is what your aim is, then:
html{
background: url('bg_img.png') no-repeat center center fixed;
}