So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
Related
I have a background image for my hero section. On some screen, the background image fits perfectly. However, on some other screens such as my iPhone, it's really way too zoomed in.
I tried solutions on Stack Overflow, such as background-size:contain or background-size:100%, but I end up with like a background that it is repeated 3-4 times. Here is my code for the background:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
UPDATE the initial answer raised the question of background-attachment: fixed which can cause problems in some combinations of settings. However, in this case testing with different aspect ratios images and leaving the fixed in I was unable to recreate the problem, the background-size: cover worked in both orientations. I leave the info below here for now in case it helps point to something that is causing the problem.
Original:
The problem may be in these settings:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
background-attachment: fixed is not supported in IOS. Depending on what version it can lead to e.g. overstretched image (though this question talks of zooming in rather than stretching). See https://caniuse.com/?search=background-attachment but the background-size: cover should have got round that for you.
Partial support refers to supporting local but not fixed
The dimensions of the image you are using for the background are not appropriate for mobile screens. The image you are using has landscape orientation. There are two things you can do :
Use different image having portrait orientation. And add media query in your CSS code.
This approach might not be suitable but you can give it a try. Instead of using image as background, use a relevant color for background (like some shade of brown in this case), and add image as a separate element in your HTML. You can again manage the size of image using media queries. And make sure you position image element as fixed.
Try min-height and check one
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height:100vh;
}
I am making a website and want my front page to have a photo that covers the entire background. I have searched and searched but I can't get my image to fit the screen, it automatically zooms in! I have attached an image of what it looks like, the picture is of a pier and all that shows is a zoomed in corner of the pic. Anyone got any tips?
You can use
background-repeat: no-repeat;
background-size: cover;
You can use this CSS
html {
background: url(example.jpg) no-repeat center center fixed;
}
I've been fiddling with my background image in CSS for a couple hours now and have tried searching through articles to find a solution but still have nothing. I'm trying to make my background image fit the screen no matter what the browser size.
At first I was using this CSS code which seemed to be working:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
But then when I re-sized the browser this happened: http://prntscr.com/j1d4kv
I then went and found another solution that said I should put the background image in the html tag, which i tried:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
}
This fixed the issue of the background image not fitting to the bottom when the browser size changed, but then I had this issue when I was full screened: http://prntscr.com/j1d742 It left a gap on the right side!
Most likely your body doesn't reach the full height of the browser window, if it doesn't have much content. Add this to correct that:
html, body {
height: 100%;
}
You want to add,
background-attachment: fixed;
Here's an example: https://embed.plnkr.co/3Y7O1TQa8ssPQKVq0tCW/
I need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down