help, header banner is incomplete on phone screen
.imgbanner{
height: 200px;
max-width: 100%;
margin-top: -70px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
How can I make it display well horizontally?
Real image: https://i.imgur.com/fKnCN5Z.png 1024x312px
Try removing the width and margin. You also might not want to set a fixed height, because this will crop your image on smaller screens.
Like this, the text in the image might not be readable when viewed on smaller screens.
.imgbanner {
height: 200px;
/* max-width: 100%; */
/* margin-top: -70px; */
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
You should remove max-width and custom height property because this will crop your background image or try to add property background-repeat:no-repeat;
.imgbanner {
height: 200px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
background-repeat: no-repeat;}
<div class="imgbanner"></div>
Related
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 have been searching for a while, I still cannot find the exact answer.
I have a <div> for which the width takes 100% of the screen, the height is fixed at 600px.
I would like to add a background picture to the div for which the picture height would fit the <div> height (600px and no picture crop). Whenever I modify the width of the screen, the height should always remain 600px. The picture would then be centered and cropped on the width direction.
Try this:
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}
<div class="container"></div>
Did you tried
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`
I think this what you are looking for :
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}
<div>
test
</div>
Hope this was helpful for you.
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
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>
I have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere).
I have most of it working, except filling the width.
Here is my jsfiddle: https://jsfiddle.net/jwdyc1rh/
HTML:
<body class=" cms-index-index cms-home">
<div class="main-container col1-layout">
<div class="main">
</div> <div>
</div>
CSS:
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
}
Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.
A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.
Use background-size: cover;
jsfiddle
Apply background size like background-size: 100% 100%;
It will do the trick.
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
background-size: 100% 100%;
}
Updated Fiddle
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;