I have two images inside a div. I want the two images to fill the entirety of the div which should be the entire height and width of the webpage. The only problem is, when I use the object-fit attribute, the images don't contain within my container at all. It's almost as if I didn't include the attribute at all. Any way I could get some help with this? Thanks.
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
}
.container {
margin: 0;
display: block;
max-height: 100vh;
}
.image1 {
object-fit: contain;
z-index: 1;
position: relative;
top: 0;
left: 0;
}
.image2 {
object-fit: contain;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sylvanas</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<img class="image1" src="Image_Template_1.png">
<img class="image2" src="Image_Template_2.png">
</div>
<script src="script.js">
</script>
</body>
</html>
You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work
see: MDN
Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page
.image1 {
/* The image used */
background-image: url("Image_Template_1.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image2 {
/* The image used */
background-image: url("Image_Template_2.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
and you define the div class inside the body tag like this
<body>
<div class="image1"></div>
<div class="image2"></div>
<body>
Related
I have a background image that I need to be at the bottom of the entire page is the following:
.background-div {
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
background-image: url('./assets/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: 40%;
}
but in a view there is a moment that a data fetch is made that occupies half of the view and the background is left in half I do not know how to solve it when I place 100vh if the content is a lot it is cut, and if I put 100% it is cut in half while fetching the data
You can make full page image like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.background-div {
/* The image used */
background-image: url("assets/pattern.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="background-div"></div>
</body>
</html>
(source: https://www.w3schools.com/howto/howto_css_full_page.asp)
I am making a website and I stumbled upon a little problem.
I have the image set to be to height: 100% and width; and background-size: cover;
Is there any way I can make the footer appear so that you scroll UNDER the image?
.bg {
/* The image used */
background-image: url("./Resources/home_bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>
It sounds like you only need to add a z-index to your divs.
The footer would have the smaller number z-index, while .bg is the larger one.
Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.
.bg {
/* The image used */
background-image: url("http://placehold.it/400x400");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 10;
}
footer {
background: #ff0000;
position: fixed;
bottom: 0;
width: 100%;
z-index: 8;
}
.container {
height: 105vh;
}
<div class="container">
<div class="bg">BG</div>
<footer>footer</footer>
</div>
I have a problem with rendering svg image, but only in Chrome (FF, IE, Edge are OK). I can see only text from image, but there is not any background color from image etc. I need to have image on full screen, and here is my code. Could someone help me, where is the problem with chrome and how to fix it?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("bg.svg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class ="bg"> </div>
</body>
</html>
Without further information all we can say is your code works
All I did was changing the url from your svg file to a public placeholder svg image. As you can see there are zero issues with displaying this file.
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://placeholder.pics/svg/300");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="bg"> </div>
I am having trouble making my image fullscreen. if i make a css: .background {background: url....} it works fine but then noting else works. So I made it as and image but the image isnt bigger in height than my screen so i have to scroll. Can anyone help me with this and maybe help to find other mistakes?
Thanks <3
(i see you cant see the picture were I am talking about but maybe you now the solution without seeing it :D)
body {
height: 100%;
margin: 0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.logo {
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
#foto {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 1024px;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<img src="straat.jpg" alt="street" id="foto">
<div class="centered">Centered</div>
</div>
</body>
</html>
You can try to add height: 100vh to the #foto element. Hope it helps.
You want to make your image a background image, not an inline image, e.g. use background properties instead of the <img /> tag:
body {
margin: 0;
/* Fullscreen image */
/* get the image source */
background-image: url('/path/to/image.png');
/* center it */
background-position: center center;
/* fix it to the window so it doesn't scroll */
background-attachment: fixed;
/* ensure it covers the whole screen */
background-size: cover;
}
If that's your full site's HTML, it looks like you don't need the JavaScript to make your header stick to the top of the window. You can get what you need for your fixed header by just using CSS.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
position: fixed; pulls your element out of the regular flow so you'll need to over-compensate for your header's height otherwise it'll cover some of your content:
.header-buffer {
/* overcompensate for fixed header */
padding-top: 60px;
}
The class .header-buffer would be added to the element wrapping the content after the header.
Essentially:
delete your image tag
delete all CSS for #foto
delete your JavaScript
add the background properties to the body CSS
add the .header-buffer class to the same element that has the .container class, e.g. <div class="container header-buffer">...</div>
Here's an example CodePen:
Preview: https://codepen.io/tinacious/full/wRvKwy
source code
In the example you can see that the window can be any size and the image will take up the whole screen. The website content is also scrollable so you can see the header staying fixed to the top.
I am trying to set an image as a background, but it doesn't fit at mobiles:
Is there another way to make it without changing wallpapers with a #media attribute?
My HTML and CSS:
body {
/* Location of the image */
background-image: url(../img/background.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<h1>ALOOOU</h1>
</body>
</html>
Add a viewport height to your body for mobile like this:
#media (max-width: 768px) {
body {
height:100vh;
}
}
Try using it as a full width background on the html tag:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body tag only to 100x100px .this img tag full of window.
body {
height: 100px;
width: 100px;
/* normal body */
}
.CanvasImg {
background-position: center center;
background-attachment: fixed;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
background: url("http://sendeyim.net/uploads/resim-galerisi/3d-masaustu-resimler_468650.jpg") no-repeat;
background-size: cover !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !impoertant;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>
<body>
<img src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
class="CanvasImg"/>
<h1>ALOOOU</h1>
</body>
</html>
use css:
body{height:100vh;
box-sizing:border-box;
overflow-y:hidden;}
CSS3 gives us viewport-relative units:
vh is relative to 1% of the height of the viewport ,using 100vh will cover the full screen.
using overflow-y
hidden will remove horizontal scrolling
border-box indicates that the width and height properties (and
min/max properties) includes content, padding and border, but not
the margin