Problem
I am trying to set the background image of a div in CSS, but it does not work.
Code
.img-background {
background-image: url('Portfolio5.jpg');
height:100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="img-background"></div>
</body>
</html>
jsfiddle
In your .image-background class, you are setting the height as 100%; this will cause it to become 100% the height of the parent element, which is the body. However, the body doesn't have a height specified, so it defaults to 0 and as a result, your image is not visible. To solve this, you need to set the height of html and the body to 100% as well.
html, body {
height: 100%;
margin: 0;
}
The margin has been set to 0 to avoid the body overflowing.
It's not working because you use height:100%
for example :
.bg-img {
width: 100%;
height: 100vh;
background: url('./img.png') no-repeat center;
background-size: cover;
}
Edit:
vh stands for Viewport Height (vh) and it means 100% of parent's height.background-image needs certain height and width to show content, so a tag without inner html does't show its content.
Related
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.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
width: 100%;
}
.top {
width: 800px;
margin: 0 auto;
}
.topfixedimg{
background-repeat: no-repeat;
background-size: cover;
background-image: url("image.jpg");
background-position: center;
background-attachment: fixed;
width: 100%;
height: 85%;
}
</style>
</head>
<body>
<div class="top">
<div class="topfixedimg"> </div>
</div>
</body>
</html>
If I don't add the height attribute in the CSS of the outermost "top" div, the above code snippet does not display the image.
If I add height, then it displays the image correctly.
Should it not take the height from the CSS of inner div element and still display the image, even without the height attribute in the CSS of the outermost div element ?
85% height means 85% of the height of parent. Since you're not specifying any height to outer div, its height is 0px and thus 85% of 0 is 0.
Either specify the height of parent, or specify the height of inner div in px, em, rem, etc.
#outer {
width: 100px;
height: 100px;
background: red;
}
#inner {
width: 100px;
height: 50%;
background: green;
}
<div id="outer">
<div id="inner"></div>
<span>I'm just another element</span>
</div>
The topfixedimg class has a height of 85%. This means display this element 85% of it’s parent (which in this instance is the ‘top’ div.
As the ‘top’ div doesn’t have a height set, it’s height is 0. So 85% of 0 is 0.
I am having trouble centering my background. Whether I change the BG into small size to make it center it won't.
Her is my CSS:
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center center;
height: 1813px;
width: 1024px;
}
It doesn't center the background - it keeps going to the top left of the monitor even though using a smaller size photo. Thank you all!
To centralise the background image you don't need to specify center center twice. It should be as follows:
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center;
height: 1813px;
}
Your code works as aspected, if you remove the width you will see exactly the image centered in the background...
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#container {
background-image: url('http://supermario3dworld.nintendo.com/_ui/img/views/power-ups/char-dobble-mario.png');
background-repeat: no-repeat;
background-position: center; /* you dont need to specify the value two times */
height: 1813px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
should work, one other thing you could do is make a div and put the img in it, then use -1 z-index and just center the div.
You could also try adding
body {
min-height: 100%;
}
because the container might not be the full viewport size.
The following code is unable to place the image at the center of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("../images/dandelion.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
This is what I am getting.
Your body is only as tall as the things inside it, so its actually centering correctly.
To get the result you want, you need to either make the actual page longer by adding things to it, or this to work around:
html,body{ height:100%; }
Note that you need to have html in there too because percentage height is relative to its parent (<html> is a parent of <body> in this case)
u may want to try something like this fiddle
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: center -25%;
background-size: 50%;
height: 100%;
width:100%;
}
Checkout this Fiddle (jsFiddle).
You need to reset default properties and give these some styles as your containers such as <html> and <body> are adjusted according to the content inside it (in this case the image).
Apply these styles:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
background-image: url("http://placehold.it/200x200");
background-repeat: no-repeat;
background-position: center center;
}
Hope this helps!
Give html and body height 100% and background position 50% 50% or center center.
html {
height: 100%;
}
body{
background-image: url("http://i.imgur.com/InDshke.png");
background-repeat: no-repeat;
background-position: 50% 50%;
height: 100%;
}
Quite new to CSS3 and I have a issue with the DIV not changing height as the background-image get's larger (height). The DIV should expand as the background image is expanding. After this DIV there will be a footer with fixed height.
The web page:
http://www.cre.fi/kalustekeskus/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
background-image: url(../img/kalustekeskus_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 1024px;
width: 100%;
min-height: 90%;
position: fixed;
overflow: hidden;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kalustekeskus</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="full-screen-background-image"></div>
</body>
</html>
Is there any smart way of doing this?
Thanks!
In the website you have used min-weight:600px; change this to min-height:90%.
You can specify the min-height in percentage then the div will expand with respect to the actions you do in the image.