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;
}
Related
This question already has answers here:
Position a CSS background image x pixels from the right?
(21 answers)
Offset a background image from the right using CSS
(17 answers)
Closed 2 years ago.
I want to add a background image to my web page. The image that I want to use has around 20% transparent padding on all four sides. What attribute should I use so that the background image has an edge-to-edge fit (avoiding the transparent part)?
body{
background-image: url("bg.png");
background-size: 90%;
background-repeat: no-repeat;
}
You can change background image size, and fix them to center:
body{
background-image: url( "bg.png" );
background-size: 60% 60%; /* 100% - 40% (top/left + bottom/right paddings) */
background-position: center;
background-repeat: no-repeat;
}
For something like this, I prefer to add a container element to the page and avoid using body for background images when I need to exercise finite control over display and positioning. This would be my solution:
JSFiddle
Markup
<body>
<div class="container">
<div class="media"></div>
</div>
</body>
SCSS
body {
padding: 0;
margin: 0;
}
.container {
position: absolute;
width: 100%;
height: 100%;
.media {
width: 100%;
height: 100%;
transform: scale(1.4);
background: {
image: url("https://i.ytimg.com/vi/cYNlJYQI3Uw/maxresdefault.jpg");
position: center center;
size: cover;
repeat: no-repeat;
}
}
}
Notice that I use a CSS reset to remove automatic margin/padding on the body element, and that I allow body to fill the entire viewport.
The container class fills the body element with width and height set to 100%. I use the CSS background-size property to cover the container, then I use the transform property to scale container.
There are many ways to achieve this effect. Alternately, using a background-image property on the body tag will allow me to use background-size to scale the image to obfuscate the image's transparent padding as you described, but it is more difficult to center the image within the container.
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 ## }
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%;
}