I have two background images. The first is a picture of some trees which I want at the back and the other is just a black box that I want to hover over the top of the tree picture.
The problem i'm having is that when I use the 'background size: cover' style it messes them both up. I just need the tree picture to cover and the box to sit on top. Here's the code:
.main-image {
width: 100%;
height: 370px;
background: url('../img/main-img-black.png'), url('../img/main-img.jpg') ;
background-repeat: no-repeat, no-repeat;
background-position: 10,0;
background-size: 1, cover;
}
I hope this sort of makes sense!
Per MDN background-size: 1, cover; is not valid CSS, so the rule 'falls over'.
Try changing it to:
background-size: 10px, cover;.
If you arent setting the value to cover, contain, auto or zero- the number must be followed by the unit type.
Figured it, thanks to the suggestions. Everyone was right about the background-size unit.
Here's the working code:
.main-image {
width: 100%;
height: 370px;
background: url('../img/main-img-black.png'), url('../img/main-img.jpg') ;
background-repeat: no-repeat, no-repeat;
background-position: center;,0;
background-size: 700px, cover;
}
Related
I would like to create a div with a partial background, example:
I tried applying margin in white, but I'm a bit lost.
You didn't write any code in question. So i writing example Html and CSS code now. I hope this code will has solve your problem.
body{
background-color: #e3e3e3;
}
.bg-container{
background-image: url("https://i.stack.imgur.com/Q9aDy.jpg");
width:250px;
height: 250px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
<div class="bg-container">
</div>
You can use background-size: width height; and background-position: x y; to specify the space the background occupies within the div.
A gradient is an image, so you can add one and manipulate it as a color. Use background-color to specify the background you want to use behind it. background-repeat: no-repeat ensures that it is used only once.
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: 50% 50%;
background-image: linear-gradient(white, white);
background-color: black;
The background-position values specify the horizontal and vertical positions, respectively. Use 50% 50% to center it.
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 have a large background image that is fixed with text being displayed on top of it, however the bottom of the image is being clipped off. I want the image to be displayed completely and not be cropped off.
#content {
background-image: url(../images/bean.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Set background-size to be 100vw 100vh i.e background-size: 100vw 100vh;
#content {
background-image: url(http://lorempixel.com/1400/1400/sports/3/);
background-repeat: no-repeat;
background-size: 100vw 100vh;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Checkout this DEMO: http://jsbin.com/buqaju/1/
To have the background always cover the whole container you can use:
background-size: cover;
Source: http://css-tricks.com/perfect-full-page-background-image/
Pay attention to browser support: http://caniuse.com/#search=background-size (hint: No IE8)
Also, I noticed it's not very performant on pages with a lot of transparencies and moving backgrounds, but other than that I use it quite a lot and it works well.
Increase the height?
height: 100em;
you have
background-size:100%;
use
background-size: 100% 100%;
.bg_care{
background-image: url(../img/care-area.jpg);
background-size: cover;
}
just use background-size as cover it wont cut off.
You could also modify your background as such:
background: url(xyz.jpg) no-repeat **center center** fixed;
where you change the center values as needed (left,right,bottom,top). Depending on the image it may be useful.
I have this css code, that creates an triangle and an background image fixed:
.post-wrapper_pic2 {
position: absolute;
width: 922px;
height: 1550px;
-webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
background: url("http://krishnaeverson.com/wp-content/uploads/2014/01/universe.png") center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10px;
}
But the problem is that the image is beeing resized and even though i put a hight quality image as background it appears pixelated. Can you figure what's wrong in what I'm doing?
You were apparently wondering that a CSS property named background-size leads to resizing of the image … so you should’ve just looked up what it does.
background-size:
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.