So I'm trying to make it so that a full page image shows in the page, and resizes responsively on different screens so that it always takes up the whole screen. I looked it up on w3schools and other questions on Stack, but it seems that no matter what I do it never works, I checked if something is overriding my CSS in the browser developer tools but it seems there is nothing wrong, it just simply doesnt work. I'm using bootstrap and the div which background image should be full page is a col-12, would that cause the problem? This is my css:
body, html {
height: 100%;
}
#image-div {
background-image: url("paper.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
color: white;
background-color: rgba(0,0,0,0.5);
background-blend-mode:darken !important;
font-size: 20px;
}
and the html:
<div className="row" id="calculator-row">
<div className="col-12" id="image-div">
<div className="over-image">
<p class="try-calculator">
Calculate the possible return of investments
</p>
</div>
</div>
<div className="col-12" id="calculator-div">
<h1>Return of Investments</h1>
<BenefitCalculator />
<strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
</div>
</div>
EDIT: Forgot to mention I am also using REACTJS
Try backgound-size: cover, contain;
If this does not work send an example of you code. Also height in percentage is always a bad idea. If this is for the element to be as tall as the page use 100vh or some other method. Also note that you will probably need a media query for portrait and landscape orientation.
Try this snippit:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row-fw {
width: 100vw;
height: 100vh;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
#image-div {
background-image: url("https://placekitten.com/g/1920/1080");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: block;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken !important;
font-size: 20px;
}
<html>
<body>
<div class="row row-fw">
<div id="image-div"></div>
</div>
</body>
</html>
You could also be using height: 100vh; & width: 100vw; (vw = viewport width, vh = viewport height).
If the parent gets bigger than the size of your screen, so will the background. 100vw & 100vh will only use the viewport width & height.
just add below class to the parent div of image, it will scale itself as per screen sizes.
.img-responsive -> Makes an image responsive (will scale nicely to the parent element).
Related
I have 11_100px(height) x 3_840px(width) image that I want to fit on my website, I managed to somehow fit it for desktop size using the padding-top trick calc(height / width * 100%) to calculate aspect ratio). But when resizing viewport it becomes impossible to maintain for tablet and mobile.
Somehow I need to make the height fully reliable to the width size
I wasn't able to find any stack overflow sufficient answer, how are such large backgrounds handled for all devices?
Example: link to my example
The best way to achieve this is by adding a background image to a div.
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-image: url("https://via.placeholder.com/500x500.png?text=Placeholder");
background-size: cover;
background-position: center;
}
<div></div>
You can define a background-image for bodyto which you apply the below settings (except using your own image of course).
The background image will not scroll with the content in this case - I suppose this is what you want.
body {
margin: 0;
background-image: url("https://picsum.photos/1200/1600");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You can also do this to scale the image to fit the width of the screen and if the width is too long it will be hidden.
body {
background: url("https://picsum.photos/1200/1600");
background-size: cover;
object-fit: cover;
width: 100vw;
z-index: -1;
overflow-x: hidden;
}
nav {
height: 10vh;
width: 100vw;
}
footer {
height: 10vh;
width: 100vw;
}
<html>
<head>
</head>
<body>
</body>
</html>
I'm making a website and the website is basically just a huge image except for the clickable elements and I was wondering how I could make the image size increase according to the the user's screen size so that the image doesn't look stretched, but still fits the whole screen. This is my first time working with viewport, so I can't exactly say I understand it very well. Here's some code to help out:
<div class="Image">
<img src="Background.png"/>
</div>
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;
}
The first part was written in index.html while the second was written in style.css. Just for your info, the html part was written in <body>.
You have to apply
width: 100vw;
height: 100vh;
object-fit: contain;
To img directly , you can use id class or img directly but last method is not recommended as it will apply to all img tags in the document
I have used red background to show how much area image covers but as object-fit: contain; so image ratio's are maintained
Read this to know more about object-fit
Use
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
To remove any unnecessary horizontal scroll bars as tags have some default margin and padding . So , here used the body tag
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;/*Can be cover , fill , none...*/
background-color: red;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<div>
<img src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="Image" />
</div>
<div class="fullscreen" />
.fullscreen {
position: fixed;
top: 0;
left: 0;
background-image: url(Background.png);
background-size: cover;
background-position: center;
width: 100vw;
height: 100vh;
}
I need some help regarding CSS, I've been trying for hours to make a background be fullscreen.
This is my CSS:
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
html{
height: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url(../assets/background.jpg);
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
And this is my html:
<html>
<div class ="mainContainer">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</html>
This semi-works the problem is the background stops as soon as my content stops, it does not continue until the end of the browser window.
Example:
I'm trying to make the background go way down there and dynamically resize with my browser.
Your HTML code is missing the body tag. Add that, and also add body { min-height: 100%; } to your CSS - this will also stretch the body height to at least the window's height.
In CSS, 100% is broken when it comes to vertical things. Try 100vh, which is the percentage of the viewing height. Also, 100vw is 100% of the viewing width. There are also vmin and vmax. Hope this helps!!!
A few things:
Like another person said, use a <body> tag.
Add a width of 100%
in background-image rule, you should have single quotes around the URL, so it looks like: background-image: url('../assets/background.jpg');
Lastly, you should be using a DOCTYPE. https://en.wikipedia.org/wiki/Document_type_declaration
.mainContainer{
width: 70%;
display: table;
margin: 0 auto;
padding-top: 100px;
}
body{
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0;
background-image: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&h=650&w=940');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
<div class ="mainContainer">
</div>
</body>
</html>
Also...in the Stack Overflow code embed, I don't think you can use custom elements.
Thanks everyone for the help, the issue was from angular material style that was overriding my background-image tag and adding borders to it for some reason.
I fixed it by adding ::ng-deep in front of html css, like this:
::ng-deep html{
background-image: url('../assets/background.jpg');
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Also the issue with the background not going full screen was because I was missing the body tag and body { min-height: 100%; }
This is the effect I need for my website:
http://urban-walks.com/#nicer_way
Not the fancy side of it - I have background images for certain 'sections' or divs, and I need them to fill the whole of the browser window. They also need to resize when changing browser side (such as using mobile) so it keeps the effect.
This is my current code for each div -
HTML:
<div class="graph">
<br><h1>Latest SKE Graph</h1>
<img src="knowledge_graph.jpg">
</div>
CSS:
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}
Change your height to "100vh" and your width to "100vw". v stands for view-port of the device.
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}