I am designing a webpage, which has a background image fixed, and i have a problem with it in mobile view. like, In desktop view, its perfectly alright. whereas, in mobile view, the image is too blurred and it is not good looking. i couldn't find where i have made mistake. I have attached images of both the views and my code for background image here.
Desktop:
Mobile:
My CSS:
body
{
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #ffffff ;
background-image: url(images/cover3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
You can use media query and change background-image or use background-size: cover;
use this
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{
background: none;
}
this fill fit a background for the screen size
Add
background-position: center;
background-size: cover;
Related
Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.
These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: cover;
}
and
body {
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
}
this shows the full image but leaves the half the screen blank and explodes in landscape
body{
background: url("HOME.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vw;
overflow: hidden;
}
The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.
Use code as below:
See fiddle
body {
width: 100vw;
height: 100vh;
background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Try to use
background-size: 100% in your css i.e.
body {
width: 100%;
height: 100%;
background: url("HOME.png");
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-size: 100%;
}
background-size: 100% applies to both height and width.
Additional Info
if you want to modify any one of them you can try background-size: 100% 50%;
you can read more about it here
https://www.w3schools.com/cssref/css3_pr_background-size.asp
EDIT: Not a duplicate of the linked question as I am stating that I attempted the accepted solutions in the other question and that they are not solving my problem
I'm trying to give a containing section a background image but the image is about 15% larger than the screen. I've attempted making the background-size 100%, cover, and contain but it is consistently larger than the page. I looked through the size of each element in the DOM and they're all the same size none are larger so I am stumped as to what is causing the larger background image. Here's my code:
html
<section className="Intro">
<img />
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<p>...</p>
</section>
css
.Intro {
background-image: url('../mobile-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: white;
height: 100vh;
}
Your code was correct. But some browsers hasn't supported for some css rules. Then we have to use their css rules. Try with this one. It will work
.Intro {
background-image: url('../mobile-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
height: 100vh;
}
I am having trouble here. I got a background image that is 1024x960, and I want it to fit in all type of resolutions, but impressively, it is overextending a bit on all screens.
This is my CSS:
body {
background-image: url("../testes/jogo.bmp");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
I guess there has to be a mistake with the code, but yet every time I read it I feel it's ok but obviously it's not.
Try This :
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Frorm the docs:
Cover: 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
If you want the image to be fully in view, you can use
background-size:contain;
Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
body {
background-image: url("../testes/jogo.bmp") no-repeat center center fixed;
background-size:cover;
}
you can see here
Try This Code:
body {
background-image: url("http://miriadna.com/desctopwalls/images/max/Natural-dam.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am creating a responsive design for my site.
I have a display logo like this:
<h1>example.com</h1>
and I show the logo in CSS:
#header h1{
margin-top:23px;
background: url(http://www.example.com/files/logo.jpg) no-repeat !important;
float: left;
text-indent: -9999px
}
I have now created a new CSS file for mobile visitors and responsive design.
#media (max-width: 480px) { ...
How do I achieve that the logo is re-sized according to width of user's phone/browser? I discovered background-size property but haven't succeeded in using it.
Thank you
Try
header h1 {
background: url(http://www.example.com/files/logo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to create a responsive website but ran into a problem with the background. It doesn't stretch the way it should.
Here's a fiddle with my code: http://jsfiddle.net/8jd1hax4/
And here's the bit of my CSS with the background
body{
background-image:url('Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
max-width:100%;
max-height:100%;
font-family: 'Scout', arial, sans-serif;
color:#fff;
}
You can best see my problem when you make the fiddle more narrow, the white space appears at the bottom. It also shows the white space on my mobile, which is weird because I added a media query for that size.
Any idea how to get it to stretch all the way to the bottom? I've tried adding a transparent border and padding on the bottom, both to no avail.
Thanks! :)
The problem with having the background on the body is that the body is not necessarily the full screen, but only as much of the screen as has content. So when you resize and the content gets shorter, the body gets shorter.
One solution would be to put a wrapper tag around your content:
<body>
<div class="wrapper">
(All other content goes here)
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.wrapper {
background-image:url('http://capeanntunaclub.com/images/Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
font-family: 'Scout', arial, sans-serif;
}
Fiddle: http://jsfiddle.net/8jd1hax4/2/
For the record, here's another option for you: http://jsfiddle.net/panchroma/xrz4v4L4/
The important bit is that I'm setting the background image on the html element, so it's sure to include the full height of the browser window.
html {
background: url(http://capeanntunaclub.com/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this and other solutions goes to http://css-tricks.com/perfect-full-page-background-image/
Good luck!