I have this code:
.main {
min-height:100%;
width:100%;
position: relative;
background-image: url('onepage_restaurant.jpg');
background-repeat: no-repeat;
background-size: cover;
display: block;
}
but the div of class .main isn't showing up. Why?
Your code works fine unless you make sure that your parent element has a height greater than zero - otherwise your .main element will have no height either.
Also make sure that the file path to your image is correct. You can use the developer tools of your browser to check the height of your container and the image url.
html, body {
width: 100%;
height: 100%;
}
.main {
min-height: 100%;
width: 100%;
position: relative;
background-image: url(//placehold.it/500);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
<div class="main"></div>
You want to set the min-height of that element to 100%. When you want to set the height of an element with percentage you need to set the height of the parent element to a specific value.
Set the height in pixels. Example.
height: 100px;
Could be either background image wrong path or, if you have no content, html, body height set to zero.
try this in your css
html, body {
width:100%;
height:100%;
margin:0;
padding: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;
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
I want to create a page contains only one svg element that fit width and height and has maximum possible scale.
Related questions
How can I make an svg scale with its parent container?
How to resize an image to fit in the browser window?
didn't work, but combination of proposed methods solved the problem.
1) replace width="A" height="B" in opening <svg ...> tag to viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto".
Now it nearly works But not very accurate because browser automatically adds margin: 8 to body's style (even if there is not <body> tag in .html file). So
2) add <style> body { margin: 0 } </style>
This might help. I used this CSS to fit a background image to width and height and it scales down accordingly to the browser.
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
You can set your SVG in a DIV and add a class to it, then you simply use the above CSS to scale the DIV's content.
put your image in a div, and apply these css rules:
div{
height:100vw;
height:100vh;
}
svg{
height:100%;
width:100%
}
Here is the solution for you guys. Check the link here
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
.svg-cont {
width: 100vh;
height: 100vh;
display: flex;
justify-content: center;
margin: auto;
}
.svg-cont > svg {
width: 100%;
height: 100%;
}
I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.