<!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.
Related
I have a background-image set on my div element, but I can't see it. Why is this happening?
<html>
<head>
<title>interior</title>
<style>
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
}
</style>
</head>
<body>
<div class="pen">
</div>
</body>
</html>
The way your code is now (in the question), you need to define a height for the pen element. By default (without contents) height remains zero, therefore no background image will be shown.
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width: 100%;
height: 300px;
}
<div class="pen">
</div>
You need in this case a height of the element and possibly even background-size:
Like this:
height: 300px; /*for example*/
background-repeat: no-repeat;
There is no height set for the image, try this:
.pen {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU");
width:100%;
height: 300px;
background-repeat: no-repeat;
}
Your div should have some height you can use this in your code and also you can adjust your height according to you . background-size:cover will cover whole background with your image.
.pen{ backgroundimage:url("https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTFFyGF8AZJB_M1TRnINMlytntLg1o5vx11xA&usqp=CAU"); width: 100vw; height: 50vh; background-size : cover;
I want to include background image which is oversized (4000px x 3000px) in the div,
in such a way that width will take max width of the screen and height will adjust to it.
I don't know why but it doesn't work if the height is not specified (like 1000px).
The image doesn't appear at all.
I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)
The part of code (HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
The part of code (CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.
In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Just try this replace the auto with 100% in height and check.
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Are you like this .
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.
I'm trying to add a banner image and adjust its size from the CSS. The IMAGE and the CSS are in the same folder, next to each another.
HTML
<body>
<header>
<div class="banner"></div>
CSS
div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;
}
You have no content in that element, therefore its height is 0 => no visible background. Just add some content and the background will appear.
The height setting has no effect if the parent element doesn't have a set height. If you want the banner to be 25% of the window height, add this rule:
html, body {
height: 100%;
}
I put it all in the html file I created and this works for my image that's in the same directory. You don't need to call it as div.banner, adding the class to the div is enough to just call it by what you name it.
<head>
<style>
.banner{
height: 100%;
background-image: url('./butterbot.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<div class="banner"></div>
</header>
</body>
background is an inline attribute and would work with root elements such as html or body attributes if you set the background styling to <body>(just an example). Though it is not advised to use it on the html and body but a fixed position div with 100% width and height as shown below
.banner {
background: url("https://picsum.photos/200") no-repeat fixed center;
position: fixed;
height: 100%;
width: 100%;
}
<div class="banner"></div>
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.