My website background image responsiveness works during md size -> when it turns in sm and xs it is cut - it means when I want to see the cat during xs I can see only a piece of cat. How to fix it to see all my background photo during smaller sizes?
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?familyans+SC:wght#300&display=swap" rel="stylesheet">
<div th:replace="fragments/front_head"></div>
</head>
<body>
<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>
<nav th:replace="${#service.getLoggedCustomer()} ? 'fragments/cattery_logged_in_navbar' : 'fragments/cattery_navbar'"></nav>
<footer th:replace="fragments/cattery_footer"></footer>
</body>
</html>
CSS:
body {
padding-top: 120px;}
First, remove the background-size and background-position css from the style attribute of the .bg-image element. Then try this CSS.
.bg-image{
background-size: contain;
background-position: center;
}
#media screen and (min-width: 450px) {
.bg-image{
background-size: cover;
}
}
The reason it's cropping is the "cover" background size is displaying the entire image centered. Of course that leads to cropping since the smaller sizes are too small to show the whole image in its original size. Contain makes sure you can see all of the image.
Related
This is what is happening with the code.
Here is the code...
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
The size of the image is 963w x 200h.
At the end of the day, i would want this to be 100% width, but also be responsive for all devices. How can I make that happen?
adding background-size:cover; wont do that trick.
Here is a fiddle: https://jsfiddle.net/t7ekj0mh/
Add the rule background-size: contain to your div.
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div>
</body>
</html>
Add background size contain for the image to scale horizontally
As I understand, this is what you are attempting to achieve.
div{
background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat;
height: 300px;
border: 5px dashed red;
}
<div></div>
This will stretch the image horizontally and place it at the bottom, and by adding a color, it will seem as it is a one-piece thing.
I am new to HTML/CSS and I am having trouble making the background image of my div cover the full screen. I have used background-size:cover but it still has large margins on the left and right of the screen.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta viewport="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
</div>
</body>
<html>
CSS
.container{
height:100vh;
width:100vw;
background-image:url("city.jpeg");
background-repeat:no-repeat;
background-size:cover;
background-position:center;
opacity: 0.8;
}
Please try using img: {width: 100% height:100%}. Your best approach would be to inspect the element and check if the div that contains the image is restricitng its size or not. You can use firefox to inspect (I just prefer it over chrome as it shows the size of any element better visually).
By default, the body has a margin around it. Try this:
body {
margin: 0;
}
Use following code:
.background-image {
width: 100vw;
height: 100vh;
}
(Please be kind I'm fairly new to all this).
I've tried using cover, absolute, auto and whatever else to try and get the background to resize along with the page. Whenever I make the resize the page smaller or bigger, I'm left with a white box at the bottom:
https://imgur.com/a/KauGhfD
The only way to get the white to go away is if I make the page full size again. Here's my CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: cover;
background-positon: absolute;
overflow: hidden;
width: 100%
top: 0;
left: 0;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
try fix this issues :
add ; after width: 100%
this property value absolute not correct background-positon: absolute;
check this link to know the correct value
https://www.w3schools.com/cssref/pr_background-position.asp
you have also a typo on positon should be background-position:
you can use this code for cover for background of page but you must keep your ratio aspect for picture
your code have two error
1- background-position:absolute is wrong
2-width:100% it is not correct because body have this properties
then you must change your code like this
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
}
body {
background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/">
<link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>
I have these two PNG images (Image 1: eyemasktrans , Image 2:dialogue_ughhh) which I already edited in Photoshop to make them transparent. But the problem is when I try to view on Chrome, the supposed transparent images appeared to have white backgrounds. Is they any way to fix this using just HTML? Thanks in advance! Below is my current code:
Other image I use: girl_sleeping
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("girl_sleeping.jpg");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
Your eyemasktrans.png and your dialogue_ughhh.png images are fine. They have a proper alpha channel in the PNG.
I think the issue you're having is that the .parallax div is not sized corectly, and also has some weird background configurations with fixed and center, which cause it to appear like something is covering it while you scroll around the page.
I don't know what the desired effect is here, but if you size things correctly and set z-index as appropriate, you won't have a problem.
Additionally, I would suggest considering SVG for this task, since all your art is vector anyway. You'll have a much faster load time.
(Issue is reproduced here: http://jsfiddle.net/vr1qms9h/1/)
You can use the opacity attribute.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("http://thepotatoplace.ga/images/background.png");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.65;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
html ,body {
height:100%;
width:100%;
margin:0px;
}
h1 {
margin:50px;
}
.jumbotron {
height:100%;
background-image: url("http://www.zoophotels.com/wp-content/uploads/2015/02/cpt-new.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron">
<h1>Welcome</h1>
</div>
</body>
</html>
I don't know what's wrong, but it seems like when i change background-size value to cover, the background doesn't scale based on my browser size, but when i set the value to 100% 100%, it scales like i expect.
So, how to keep the value of cover and let jumbotron class do the right scale (in this case keep the value of background size (cover), while the size when jumbotron do scaling still cover)
Additional Info:
i want the result to be
1.The image cover to be like 100% 100% (fit to screen)
2.When i resizing my browser window, i want the image ratio still same like 1 step
check this web: http://www.qerja.com/
i want the jumbotron looks like this website jumbotron, resize the image width when i resizing the browser windows
Cover is working as expected. The image maintain's it's aspect ratio as it scales in relation to your browser window. Unlike applying 100% 100%.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
CSS3 background-size Property