I am not able to figure out how can I decrease the height of cloud background according to the image so that even when on mobile, the hand is always touching the cloud background bottom edge.
HTML:
<div class="slidersection">
<div class="sp-photo">
<div class="sp-photo-content">
<a target="_blank" href="https://play.google.com/store/apps/developer?id=IDSstudio"><img style="border:0;" src="images/slider/slogan.png" alt="IDSstudio" class="centered"></a>
</div>
</div>
</div>
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
height: 500px;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
height: 100%;
overflow: hidden;
background-position: center;
}
img.centered {display:block; margin-left: auto; margin-right: auto;}
.slidersection {
display: block;
padding-top: 80px;
background: rgba(255, 255, 255, 0);
}
At a quick glance:
use a media query to remove the height:500px so that the .sp-photo-content div conforms to the height of the image.
#media screen and (max-width: 640px){
.sp-photo-content{height:auto;}
}
set the background size of the image to fit the width of the screen and position at the bottom
.sp-photo-content{
background-size: 100% auto;
background-position: center bottom;
}
This would be much easier with a jsfiddle to play with ;)
I believe you need to use JQuery (JavaScript) in this case, there are limitations in CSS.
try this link: How to resize an image to fit in the browser window?
I did this to solve the issue:
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
overflow: hidden;
background-position: center bottom;
}
Do you want the background image to be 100%? If that's the case, you could do this:
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-position: center;
background-size: 100%;
}
However, a better way to do this would be to use media queries in your css to separate some of the css for mobile and for desktop. I would also suggest uploading a smaller version of that image for mobile - it'll be a hefty size for the mobile browser to download.
The below code shows how you would write the media queries:
/*for the phone - assuming back-mobile.jpg is the clouds background with a size of 480px */
#media only screen and (max-width : 480px) {
.sp-photo-content {
background: url(../images/slider/back-mobile.jpg) no-repeat scroll 0 0;
}
}
/*for everything else */
#media only screen and (min-width : 481px) {
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
}
}
Related
Is there anyway to make my body background image to be responsive in any mobile view? Especially when the height is 412x980? I know how to use some proper background cover
body {
background: url(../../something.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
But I wanted to not use fixed because I need to stay all elements on that background image.
EDIT:
After using #VIKESIR provided code, I still getting whitespace after trying to resizing every mobile views, I got the mobile view sizes here. Something like this
#media screen and (max-width: 479px) {
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background: url(https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg) no-repeat center cover;
width: 100%;
min-height: 100vh;
}
}
<body></body>
and this is what I meant still getting a whitespace after using the provided code.
By default body height is nothing, so we need to define height.
Here is some css except body tag in last one, that you can configure in every style.css when you create new stylesheet.
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background-color: #fa0;
}
.title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.title h1 {
color: #000;
text-shadow: 1px 1px 0px #fff;
text-align: center;
}
#media (max-width: 479px) {
body {
background: url(https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg) no-repeat center / cover;
width: 100%;
min-height: 100vh;
}
}
<body>
<div class="title">
<h1>TESTING<br>TESTING TESTING</h1>
</div>
</body>
I have a background image on my homepage that correctly covers the entirety of the screen. However, on mobile, the image does not resize to fit properly. It instead only shows a portion of the image. The css is below:
#hero {
width: 100%;
height: 50vh;
overflow: auto;
background: url("./hero.webp") no-repeat center center fixed;
background-size: cover;
}
#media (min-width: 768px) {
#hero {
height: 100vh;
}
}
Here is a link to the homepage. If you resize the browser to mimic a mobile screen you will see what I am talking about:
https://stormy-temple-25830.herokuapp.com/#/
I solved the problem by removing 'no-repeat center center fixed' from my background-image property. Here's the updated css:
#hero {
width: 100%;
height: 50vh;
overflow: auto;
background: url("./hero.webp");
background-size: cover;
}
#media (min-width: 768px) {
#hero {
height: 100vh;
}
}
I'm creating simple media for screens over 2560px in width. My problem is that I have header and over 2600px I set static width to my header, when I resize window over 2600px header have 2600px width but image is resizing. How to set image size relative to header width, not to screen width??
#header {
position: relative;
height: 100vh;
.background-image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('~/images/17.jpg');
background-size: cover;
background-attachment: fixed;
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
}
#media only screen and (min-width: 2600px) {
#header {
width: 2600px;
margin: 0 auto;
height: 1000px;
.background-image {
width: 2600px;
}
}
}
The problem is with background-attachment: fixed; which causes the background to scale with the viewport. According to MDN,
The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)
And neither is it compatible with background-size: cover, apparently.
Solution: reset the background-attachment in the media query.
Here is a codepen with the solution.
Or, for people who prefer snippets, a snippet (only with the SCSS compiled).
body {
margin: 0;
}
#header {
position: relative;
height: 100vh;
}
#header .background-image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("https://placehold.it/900x300");
background-size: cover;
background-attachment: fixed;
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
#media only screen and (min-width: 600px) {
#header {
width: 600px;
margin: 0 auto;
height: 190px;
}
#header .background-image {
background-attachment: initial; /* new */
}
}
<section id="header">
<div class="background-image">
hello
</div>
</section>
Note that I changed the sizes a bit to allow me to test; the breakpoint is now at 600px rather than 2600px, since I don't have that wide a monitor. So you don't have to copy the whole code, the new line with the background-attachment is enough.
I would use:
.background-image {
width: 2600px;
background-size: initial; /* to use the file sizes default height/width */
background-position: center; /* then optionally center the image */
}
Since .background-image has the same width as #header, your next obstacle would be the image's height hence the possible need for centering.
I have a single div that's 100% of the width and height of the page.
I've set the background of the div to an animated gif and made the height of the background change with the div's height (which is 100% the height of the page). The background image repeats horizontally and is positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full-screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray, horizontal thin line appears on top of the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When I make the browser's (Google Chrome) height very short, the line disappears. This problem doesn't occur on Safari.
As can be seen in the screenshot above, the repeating background image is positioned at the bottom. There is are no vertical liens between every repeated image but there is one horizontal line that goes across all of them. I've checked the image and the line is not there, it is produced by the browser. How do I get rid of this line? I've looked at other posts on this but none of the fixes work.
Here's the background image:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead of
background-size: auto 65%;
#media workaround
This bug only appears to occur with larger viewport heights. Luckily it is not as critical to scale the image down after a certain height. With that in mind we can use #media queries to apply the background-size scaling only when the viewports height is under a certain size:
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working Example
As a jsBin as well
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>
Image displays fine (covers entire background) in portrait on devices, but when rotated to landscape the image is squashed. This only happens if it is initially loaded as portrait; if the site is loaded in landscape orientation initially, it displays fine as you rotate between landscape and portrait. The rest of my site is unaffected.
Here's a fiddle of just the image: http://jsfiddle.net/pauljackson/66sqz/
And my site: http://wabi-sabi.cc
html:
<body>
<div class="slide-wrapper">
<div class="full-video-wrapper">
<img src="http://www.wabi-sabi.cc/test/images/wabisabiwebvideo.jpg" id="bgimg" alt="Full Screen Image">
</div>
</div>
</body>
css:
body { margin: 0; padding: 0; height: 100%; width: 100%; }
.slide-wrapper {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.full-video-wrapper {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
}
#bgimg {
height:100%;
width:auto;
margin:0 auto;
overflow:hidden;
}
I suggest you use something like this:
tag {
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;
}
This will cover the area but won't (supposedly) squash your image. Note also; the background-size function imho is the best way to go; there are many different settings you could see them here:
W3Schools