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
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 would like to have a full screen, fixed, responsive background image in the header for a website. I have some css which works fine on desktop browsers, but on chrome on android, scrolling through the website results in the image moving/resizing when the browser address bar is shown/hidden.
Currently I'm using 100vh for the height of the header, with background-attachment: fixed and background-size: cover. Based on what I read at the following link, 100vh should always be sized as if the address bar is hidden. https://developers.google.com/web/updates/2016/12/url-bar-resizing
I've also tried using javascript to get the initial viewport height, and setting the header height to this value. It doesn't seem to work either.
Here is a very simple example, which I've also uploaded to an S3 bucket for ease of viewing on mobile:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
Give your .background element an absolute position and add a margin to the <h1>:
<html>
<head>
<style>
html,
body {
margin: 0;
}
.background {
background-image: url(./image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1 {
margin-top: 100vh;
}
</style>
</head>
<body>
<header class="background"></header>
<h1>Should not resize on mobile scroll</h1>
</body>
</html>
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'm new to HTML and I currently have the following code stored in a .css file. What is the best way to allow for auto resize if the user changes the window size? I tried to use the following code to allow for this but I was not able to get the intended result.
body {
background-image: url('Images/Space.jpg');
text-align: center;
}
text {
color:white;
}
img {
width: 100%;
height: auto;
}
width 100% makes responsive, image cover does the same, but more usefull no need to set width or height
* { margin: 0; padding: 0; }
body {
background: url(https://www.w3schools.com/css/img_flowers.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Try using CSS background-size Property.
body {
background-image: url('Images/Space.jpg');
background-size: 100%;
text-align: center;
}
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>