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;
}
}
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'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 display problem in my web site content.
I am creating a website and it displays well on the browser (width 100%) But when I resize the browser screen and I made a transition to the right with the bottom scroll bar a white background appeared.
I'm not using the responsive technique.
I work with a fixed container width (width: 1170px; margin: 0 auto;)
the website: http://www.lemediterranee.com.tn/medet/
Add background-size: cover to main.
main{
background-size: cover;
}
I was able to clear the white background by adding extra style to the main custom element:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Also added prefixes for cross-browser support.
If you are not using responsive design, make your header with an fixed with
.top_header {
background-color: #222d68;
width: 1170px;
height: 45px;
}
Make your slider and main container with fixed width too
#slideshow {
float: left;
width: 1170px;
position: relative;
z-index: 8;
border-bottom: 3px solid rgb(194, 194, 194);
}
main {
background-image: url("../img/backgrounds/main_bg.jpg");
background-repeat: no-repeat;
height: 1075px;
float: left;
width: 1170px;
}
For the footer to
.bottom_footer {
width: 1170px;
height: 45px;
background-color: #222222;
float: left;
}
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;
}
}
I have a cover photo on the front page of my website and it looks fine on desktop and scales with the browser size being changed, but looks absolutely horribly when opened on a mobile device.
Here's what I am using:
.first {
width: 100%;
height: 100%;
background-attachment: fixed;
position:relative;
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried doing this:
#media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
#media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
But that didn't work.
Any help will be appreciated!
We have a unique class on the image, so set the image absolutely positioned, and set the width using a percentage directly in the CSS.
You are using same classes more than once.
.first {
background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
See your reptition below
Define horrible? What happens?
What mobile devices?
if you target the html element it should scale well.
html {
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On mobile devices the image will be most likely cropped.
<html>
<head>
<style type="text/css">
.first {
width: 100%;
height: 100%;
background: url(9.jpg) no-repeat;
background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
use: background-size: 100% 100%;
*/
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
Hope this helps..