This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 4 years ago.
I'm trying to set up a background-image to cover the whole screen, but it still doesn't cover the whole page, but only the upper part of it.
What am I doing wrong?
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104215/launch-day-boom_copy.svg");
background-repeat: no-repeat;
background-size: cover;
}
body { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104215/launch-day-boom_copy.svg"); min-height: 100vh; /* You must set a specified height / background-position: center; / Center the image / background-repeat: no-repeat; / Do not repeat the image / background-size: cover; / Resize the background image to cover the entire container */## > Heading ## }
Related
This question already has answers here:
Apply background-size to individual layer of a multiple background
(1 answer)
CSS3 Backgrounds - multiple background-size properties
(1 answer)
Closed 3 years ago.
2 css backgrounds: 1 plain image and 1 with repeated dots to cover the image.
The image needs to be streched using the style "background-size: cover;"
The dots are just to be repeated, not streched so following CSS is applied:
.mybackground_pic
{
height: 1000px;
width: 1000px;
background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
background-size: unset, cover;
}
But above code causes the cover not to work (image is repeated, see https://codepen.io/jacopsd/pen/MWWZdaX)
2n try: Leaving out the "unset" also doesn't solve it as it streches the dots (see https://codepen.io/jacopsd/pen/xxxmNvV) :
.mybackground_pic
{
height: 1000px;
width: 1000px;
background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
background-size: cover;
}
How to get the image streched but the dots repeated?
Change to background-size: auto, cover:
.mybackground_pic {
height: 1000px;
width: 1000px;
background: url(https://hubskills.com/wp-content/uploads/black-dots.png), url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
background-size: auto, cover;
}
<div class="mybackground_pic">
</div>
Try this :
.mybackground_pic
{
height: 1000px;
width: 100%;
background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
background-size: auto, cover;
}
This question already has answers here:
How to center a (background) image within a div?
(9 answers)
Closed 3 years ago.
So, I have a big image with logotype in the center, and thing that I asking for is how do I horizontally center the image, if screen width changes or varies between different devices?
I saw few solutions using "img" tag, but I need to know how to center background specifically.
body
{
background-image: url('website-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
It's OK on big screen, but I am not sure that my screen big enough to display website with various resolutions.
You can use the background-position property, and set it to "center":
background-position: center;
Background Position Center will center your background image.
background-position: center;
body
{
background-image: url('website-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 6 years ago.
So I wanted to make a site where I could have the background have a header image of say 600px image, that being the "site background," then having the rest be a tiled image, as well as that I wanted the header background to adapt to movement, like background-position: center; CSS property.
I looked at W3 but their documentation is confusing. here
This is some code I tried:
background: url(bg.png) top, url(tile.png) repeat;
But I'm not sure how I'd be able to add background-position & height into that.
Short example:
.web {
width: 800px;
height: 1000px;
background-image: url(https://dummyimage.com/800x600/000/fff), url(https://dummyimage.com/800x300/555/fff);
background-size: 300px 200px, 300px 100px;
background-repeat: no-repeat, no-repeat;
background-position: center 0px, center 200px;
}
<div class="web"></div>
This question already has answers here:
Vertically centering image in a div tag [duplicate]
(4 answers)
Closed 7 years ago.
If you reed carefully this question you'll note IT'S NOT A DUPLICATED QUESTION. This one is about an image over a responsive background with full height image display. The answers related to the other questions are useless here. Thanks to jacob for his simple solution.
The issue:
I have a DIV with a responsive background. I'm trying to place a centered png "logo" over the DIV (or the background, if you prefer). That's what I have:
.divWithBG {
background-image: url(...);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
.divWithBG img{
display: block;
margin: 0 auto;
}
¿What I need to do to place the image inside the div? Centered both, vertically and horizontally.
Many thanks in advance.
You could just make it simpler and use 2 background images. Multiple background images in CSS:
.divWithBG {
background-image: url("http://lorempizza.com/380/240") , url("http://lorempizza.com/2000/2000");
background-size: 50%, contain;
background-repeat: no-repeat, no-repeat;
background-position:center;
width: 100%;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
<div class="divWithBG"></div>
The background image you want to be on top comes first in the background property.
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 8 years ago.
I want to expand the hero image for 100% of the browser HEIGHT.
This is what I have:
.home-splash {
position: relative;
display: table;
width: 100%;
height: 100%;
background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
With this code, the hero image (or splash image) only expands to the height of the header. However, this problem can be avoided (somewhat) by using width: 100vh;. I don't like that because on mobile devices, the height of the hero image is really large... like 5000px in height. I just want it to expand the EXACT height of the browser.
Here is the jsFiddle :: http://jsfiddle.net/E7rDG/
You need to set the height of the html/body elements to 100%.
Updated Example
html, body {
height:100%;
}