how can I add to section responsive background image 100% height? Now I don't have any image.
<section class="takecare">
</section>
takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I think there is a typo mistake.
Your css should look like
.takecare{ background-image: url("images/craft.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
I suggest you to add the element 'section' before the .takecare in case you want to add some things in this section and customize them without adding a ton of classes and id for nothing.
section.takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Btw the answer of Amab is good, this is just some recommendation.
Greetings.
height: 100% doesn't work with if parent node doesn't have a fixed height. Try to add a fixed height like:
.takecare{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/34/70_Years_Porsche_Sports_Car%2C_Berlin_%281X7A3888%29.jpg");
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<section class="takecare"></section>
Related
I'm not sure why but any image I choose for the page's background is never 100% entirely shown. I'm not sure if create-react-app has something to do with it or what but there is always some part of the image that is overflowing and gets cut from the page.
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: 100%;
background-position: center;
height: 100vh;
}
I need the image to be shown in its entirety. background-size: 100% doesn't seem to do it inside create-react-app for some reason.
Basically, background-size: 100% will fill the screen with the image, and crop it if necessary.
I think what you want is to see the whole image. You should use contain for that:
html {
width: 100%;
height: 100%;
background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
background-size:contain;
}
jsfiddle
This can be done purly with CSS, look for some basic CSS background properties
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover; //contains these values - auto|length|cover|contain|initial|inherit;
background-position: center;
background-repeat: no-repeat; //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
height: 100vh;
background-attachment: fixed; //contains these values - scroll|fixed|local|initial|inherit;
}
Note: Look for background-attachment property, if you don't need it you can remove it.
Try this:
body {
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
width: 100%;
}
Currently, I create a 1288x200 image (https://jstock.org/images/banner.png).
I want it to shown as 100px height banner. The reason I'm using 2x height, as I want it to look good in retina display.
As you can see in current outcome, it doesn't look good - https://jstock.org/
I try to change from
.banner {
height: 100px;
background: #3B3E44 url('images/banner.png');
}
to
.banner {
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: #3B3E44 url('images/banner.png');
}
But, the outcome is still the same.
Can anyone provide me some hint, on how to scale down the background image proportionally?
you set your background-size to contain so it contain your image in your height
.banner {
height: 100px;
background: #3B3E44 url("https://jstock.org/images/banner.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="banner"></div>
It seems that background-position/background-cover is not working with data URI as background images? What I have is a preview of images to be uploaded. To show those previews I am using JS to get the data URI into CSS background images, which I hope to center.
But I notice the following code does not work with a data URI
div {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRg...);
}
https://jsfiddle.net/7pfc2vLx/
UPDATE
I notice like many mentioned I am missing background-position in my above example. But seems like even with that it does not work when its an inline style?
<div id="profile-avatar" style="width: 200px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA
https://jsfiddle.net/7pfc2vLx/4/
If you want to Center an image then try JSfiddle
div {
width: 100%;
height: 200px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QBsRXhpZgAASUkqAAgAAAAD…y5eKCQaVqJ0y7W7JJJ2b6cxwd3MlGwz9mN4vrwL6sTjY+BzMiXWzjSpa2fJRFOu/auHjYv/9k=);
background-position: center center;
}
Maybe I'm missing something in your question, but shouldn't you just add the position?
background-position: center;
Your background already fit the div and if you want to make sure it's in the centre of the div, add:
background-position:center center;
But seem nothing change, because your div is not center itself, so add:
margin:0 auto;
Now they all in center posistion. https://jsfiddle.net/7pfc2vLx/2/
I have the following code at https://jsfiddle.net/ncrcfduz, and a background image at https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. I need to make the background image rescale to fit in the div, preferred to show most of the "centered" content in the image. The following code only show the top-left corner of the image.
.container {
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 150px;
width: 300px;
}
<div class="container">
</div>
You're looking for background-size: contain (see the MDN entry), not cover. To get your example to work, you'll have to drop the background-attachment: fixed. Use background-position: center to center the background in your div.
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px;
width: 300px;
}
<div class="container">
</div>
Notes:
These days you almost certainly don't need the browser prefixes, meaning you can just use background-size: contain. See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility
If you're using Autoprefixer (included in many build tools and build setups) it will automatically add any necessary prefixed versions for you, meaning you could do background-size: contain even if current versions of the major browsers still required prefixes.
You can include size in the background shorthand property with the syntax background: <background-position>/<background-size>. That would look like
.container{
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;
height: 150px;
width: 300px;
}
you should use:
.container{
background-size: 100%;
}
You just have to replace "fixed" by "center" on your "background" instruction.
Like that:
background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
JSFiddle here: https://jsfiddle.net/ncrcfduz/2/
.container{
background-size: contain;
}
I solved this way. You can set your code like this:
<div style="background-image: url('your_url') ;background-size: 100% 100%; "> <div>
This trick should work but it will not keep the image aspect ratio by default.
background-size: 100% 100%;
How do I keep the background image fixed during a page scroll? I have this CSS code, and the image is a background of the body and not <div></div>
body {
background-position:center;
background-image:url(../images/images5.jpg);
}
background-attachment: fixed;
http://www.w3.org/TR/CSS21/colors.html#background-properties
background-image: url("/your-dir/your_image.jpg");
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
Just add background-attachment to your code
body {
background-position: center;
background-image: url(../images/images5.jpg);
background-attachment: fixed;
}