I am making a header with a background-image that i want to center so i add background-position: center center; But with it, the image just disappear, if i remove the background-position: center center; everything works fine. How should i fix this because i don't see any error in Chrome Console.
<body>
<div class="wrapper">
<header class="header">
</header>
</div>
</body>
.header {
min-height: 80rem;
background-image: url("../images/bg-header.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
justify-content: center;
align-items: flex-start;
}
Using background-size: cover will enlarge the image until the entire div is full.
Try using background-size: contain. This will display your image inside the container and allowing you to center it.
.header {
background-image: url("../images/bg-header.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
display: flex;
justify-content: center;
align-items: flex-start;
}
background-size: cover; will crop the image if needed. All that it plans to do is fill the entire page regardless if the whole image fits in the page or not.
background-size: contain; makes sure that the entire image is shown on the page regardless if it is large enough to fill the whole page or not.
Related
I am trying to fit my background image to my different media queries but i cannot make the image to display completely.
.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background: url("images/BANNER.png");
background-size: cover;
position: center;
background-attachment: fixed;
}
#media (max-width:375px) {
.main {
background-image: url("images/BANNER.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
<section class="main" id="main">
<div class="content">
<h2>Hello, this is <br><span>Aptos Koalas</span></h2>
LFM!
</div>
</section>
I was able to center de image with background-position but i cannot make the image to show completely.
you are using the background-size: cover; property that will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
try with background-size: contain
I am doing this website, and the background picture when I see it on my mobile, it gets blurred. Even that in google dev tools if I try the responsive tools, it seems good.
I tried different phones, and they show up blurred also, so it's me the problem :)
This is the code:
.main {
/* background-image: url("https://images.unsplash.com/photo-1559742811-822873691df8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"); */
background-image: url("https://images.unsplash.com/photo-1534080564583-6be75777b70a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* background-size: contain; */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #464646;
}
I saw it here and in other places but seems nothing is working. What I am doing wrong here?
Appreciate your help
Try playing with object-fit property w3 link here
So I have background-image that when the browser ocuppies the whole screen, it displays properly. While I make the browser window smaller, the image shrinks up to a point, then suddenly it stops. This is what happens:
I only have a .CSS file that has:
.fondo {
width: 100%;
height: auto;
position: absolute;
background-repeat: no-repeat;
background-image: url("src/assets/images/fondo.png");
background-size: cover;
background-position: center center;
}
And the .html file has:
<div class="fondo img-fluid"></div>
I always use this for responsive background images
Selector{
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
But sometimes i also face this issue
Then i use #media and define size manually at breakpoints or make background with which is not possible in your case
All the best
What you need is height in vh and width in vw:
fiddle to playaround.
.fondo {
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-image: url("http://placekitten.com/301/301");
background-size: cover;
background-position: center center;
}
<div class="fondo img-fluid"></div>
I think it should be background-position: center;
I'm having a problem with header image on my website - it's size is 1920 x 410 px.
I wan't whole image to show but somehow, parts of it on all sides get cropped.
This is my CSS:
#banner {
background: url('img/kontakt-header-novi.jpg');
background-position: center;
background-size: cover;
height: 410px;
}
And HTML:
<div id="banner"></div>
How to fix it?
cover is to display it on full size... contain always shows all of the image
#banner {
background: url('http://via.placeholder.com/350x150');
background-position: center;
background-size: contain;
height: 410px;
background-repeat: no-repeat;
}
<div id="banner"></div>
Simply change background-size: cover; to background-size: contain;
-> https://developer.mozilla.org/fr/docs/Web/CSS/background-size
I have image (width = 1920px) and I need to show the whole image at Full HD resolution (width=1920px) the middle of the image at smaller resolutions (see screenshot):
screenshot
Could you help me add CSS style to display center of image at smaller resoultions?
//html:
<body>
<div class="header">
</div>
</body>
//css:
html, body {
margin: 0;
padding: 0;
}
.header{
background-image: url(Header.png);
width: 100%;
height: 292px;
}
Try this one:
background-image: url('path/to/img.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
And optional:
background-position: center;
Use background-position: center; to center the image, so when the width is less then the image size, the center will be remain visible.
.header {
height: 1080px;
background: url(http://www.cats.club/wp-content/uploads/2017/03/image_header_option.jpg);
background-size: cover;
background-position: center;
}
<header class="header"></header>
Just use background-position: center; and background-size: cover;.
You can find documentation on these attributes and property values here.
See the snippet. The original image is of three pirate skulls. Here you can see it is centered on the parent div.
.header {
width: 200px;
height: 200px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Christopher_Condent.svg/1000px-Flag_of_Christopher_Condent.svg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="header">
</div>