I've set my background image (1280 x 853) and that doesn't suit well the screen.
How can I fix that?
body {
background-image: url("/assets/pic.jpg");
}
You can use:
body {
background-image: url("/assets/pic.jpg");
background-size: cover;
}
And optionally set background-repeat: no-repeat to prevent to image from repeating.
Here's a example.
body {
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
}
In addition to background-size: cover, you can use the background-position property to place your image where you want it to be, as sometimes background-size:cover will cut off areas that you wanted to be visible. Using percentage values in the background-position property will allow you to fine tune this more.
Related
I am using the following code to set a background image to my HTML:
body {
margin: 0;
background: url('images/lightning.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
But the image did not show up entirely on the screen so I tried the following solution:
https://jsfiddle.net/507w9yoa/ which doesn't work as well.
Could someone please help me set the background image without adding the scroll bar or cutting off the images? I have tried all solutions available here and other site but nothing seems to work.
contain
contain will maintain the aspect ratio and fit the screen either vertically or horizontally. It will not crop the image but therefor not fill the entire background unless the aspect ratio is the exact same.
body {
margin: 0;
background: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg') no-repeat center center fixed;
background-size: contain;
}
Try this out: I just used 2 different units in background-size and now image works as for the screen size, image doesn't gets cropped and fills screen. I tried different screen and it worked fine for me.
body {
background: url('https://i.postimg.cc/1tcWpbZY/pexels-plato-terentev-5822191.jpg');
background-repeat: no-repeat;
background-size: 100% 100vh;
}
Try below
body {
background: url("https://upload.wikimedia.org/wikipedia/commons/d/dc/Standard_time_zones_of_the_world_%282012%29_-_Pacific_Centered.svg") no-repeat;
background-size: 100vw 100vh;
}
This might stretch weird but won't add any scroll bar and won't cut your image.
Got some trouble with my background-picture with uikit.
Would be nice if you have a quick solution for me.
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
Here an image of that failure
How look its image?
In your screenshot you already have background image on <body>
If you want set background on card, just use correct css selector
Update:
For filling background, set background-repeat: repeat;
Because you not give size to body, browser depended on size card, set size to body to appear background img full screen.
body {
padding : 0px ;
margin : 0px ;
width : 100hv ;
height : 100hv;
background-image: url("bg.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Hope this helps.
You must set your height with
uk-height-viewport="offset-top: true"
This will set your height with 100vh if it does not have any element on top of it.
You can see example here:
https://codepen.io/e2a4/pen/wvJyqKx
My site, http://kunal.vr.lt has a background of 1920x1080, but it doesn't repeat, and on mobile browsers, it just shows a white empty space under the picture. How would I go about making the background consistent?
The index is linked to CSS file, if that helps
Please change this From your css it reslove your issue
body {
background-image: url("1886508.jpg");
/* background-repeat: no-repeat; Remove it*/
background-size: 1920px 1080px;
}
You can use background-size: cover
body {
background-image: url("1886508.jpg");
background-repeat: no-repeat;
/*background-size: 1920px 1080px;*/
background-size: cover;
}
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page?
body {
background-image:url(background.jpg);
}
Do this to avoid repeating the image:
body
{
background-image:url(background.jpg);
background-repeat:no-repeat;
}
You can also experiment with background-size: cover like this:
body
{
background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:
http://jsbin.com/ivexah/2
you need to assign a width and height to body.
for example:
html, body {
width: 100%;
height: 100%;
}
You can use the shorthand background css property:
background: url(background.jpg) no-repeat;
Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.
To make a background image cover its entire container use background-size:
background-size: cover;
IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.
You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:
http://jsfiddle.net/GymxW/1/
The HTML:
<div class="container"></div>
The CSS:
.container {
width: 400px;
height: 100px;
background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&text=background+image);
background-repeat: none;
background-position: 0 0;
}
IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.