So I wanted to resize the background image of a div using background-size: contain, and I set the width to 100%. I need this for a mobile site, where the dimension of the screen is variable. However, i have a dilemma when setting the height.
If I set the height in pixels, when the picture becomes smaller, it leaves an empty space below the picture.
If I don't set the height, the picture won't appear at all.
What's the best solution to this?
Here's my code:
<div id="container">
<p>Some text</p>
<div id="my-picture"></div>
</div>
CSS:
#container {
width: 100%;
}
#my-picture {
background:url(somepic.jpg) no-repeat;
background-size: contain;
height: ???
}
According to W3Schools you should use Background-size: cover;
#my-picture {
background:url(somepic.jpg) no-repeat;
background-size: cover;
height: ???
}
Related
according to the window size, the picture should both cover the window and even if the window height is greater than the height of the picture, let the picture be centered and fully covered.
But I don't want like this (Because the image is not centered, it just starts from the corner.):
background-size: center cover;
Your attempt looks like you try to do it with a OneLiner.
body {
background: url(https://via.placeholder.com/500/green) transparent no-repeat center center / cover;
height: 100vh;
}
<body>
<div>
hello World
</div>
</body>
background-size sets the size of background images for the element. The size of the image can be constrained, completely or partially in order to maintain its aspect ratio.
then remove the margin and padding from the element's parent
try to separate each term, like this
background-size: cover;
background-position: center;
try using margins
I have defined a css for you
.image{
width: 40%;
height: 40vh;
margin-top:30vh;
margin-left: 30%;
}
u can change the width and height of image but remember change margin top and margin left by half.
I used this for a div with an image inside of it. should work just fine. it will get smaller/larger depending on the window size and it will be in the exact center of the page.
background-image: url(path/to/image);
background-size: cover;
background-position: center center;
I was trying, and googling and searching, but can not solve very simple scenarion... I have:
<div class = "BG">
<div class = "image"></div>
</div>
The background should be centered, and image should be centered. On browser resize, both should resize proportionally to each other.
For the BG class, I have this:
background: url("../img/d_background.jpg");
width: 100%;
height: 2160px;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
which makes BG working exactly as I need. But, as for the child image, it always incorrect size and position. Is there any way to make them work in-synch? I tried many different solution, but child image ends up either being cut-off, of being incorrect size.
you can attribute to your image the object-fit: cover; in your css
your image will take the dimension of his parent.
I'd like to have my banner fill up the top of the website completely, how do I do that? There are some gaps as shown in the photo. Here is my css:
<body>
<div id="headerbanner"></div>
<div class="container">
</div>
</body>
body{
background-image: url("../IMAGES/mountain1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#headerbanner{
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
}
It's hard to pinpoint the exact issue as you haven't provided a great detail of detail, context or code, but I believe issue is that your background image doesn't cover the container.
Try the following CSS rule
background-size: cover;
Your new CSS would be:
#headerbanner {
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}
This should stretch the background image to fill the container, whilst retaining aspect ratio.
Try to not make the banner a background, that doesnt make sense.
instead use a fixed position and manually set it to 0px top, 0px right.
Consult this :
https://www.w3schools.com/cssref/pr_class_position.asp
NEXT THING TO CONSIDER:
Once you or your client has accessed the website, programmatically set the position, width and height depending on viewport of the client's browser. This can be accomplished with javascript, using the window.onload function.
I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.
<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
<div class="container for-about">
<h1>About</h1>
</div>
</div>
How would you go about making the image responsive? The site is HERE. Thanks for your ideas!
The simplest way is to set the background-size CSS property to cover:
.jumbotron {
background-image: url("../img/jumbotron_bg.jpg");
background-size: cover;
}
This is what I did.
First, just override the jumbotron class, and do the following:
.jumbotron{
background: url("bg.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
So, now you have a jumbotron with responsive background in place.
However, as Irvin Zhan already answered, the height of the background still not showing correctly.
One thing you can do is fill your div with some spaces such as this:
<div class="jumbotron">
<div class="container">
About
<br><br><br> <!--keep filling br until the height is to your liking-->
</div>
</div>
Or, more elegantly, you can set the height of the container. You might want to add another class so that you don't override Bootstrap container class.
<div class="jumbotron">
<div class="container push-spaces">
About
</div>
</div>
.push-spaces
{
height: 100px;
}
I found that this worked perfectly for me:
.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}
You can resize your screen and it will always take up 100% of the window.
This is how I do :
<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<h1>Hello</h1>
</div>
You could try this:
Simply place the code in a style tag in the head of the html file
<style>
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}
</style>
or put it in a separate css file as shown below
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}
use center center to center the image horizontally and vertically.
use cover to make the image fill out the jumbotron space and finally no-repeat so that the image is not repeated.
TLDR: Use background-size: 100% 100%;.
background-size: cover; may cut off some parts of the image producing poor results.
Using background-size: 100% 100%; you force the image to take up 100% of the parent element for both height and width.
See W3Schools for more information on this.
Here is a working, responsive jumbotron background image:
<div class="jumbotron" style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
<h1>Welcome</h1>
<p class="lead">Your message here</p>
<p>Learn more ยป</p>
</div>
Unfortunately, there is no way to make the div height respond to the background-size. Easiest solution that I have used is adding an img tag within your jumbotron that contains that background image.
The below code works for all the screens :
.jumbotron {
background: url('backgroundimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
The cover property 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.
Ok, so I am a newbie. I want my background (which is a image), to fit every resolution of the Web Browser no matter the browser resolution. I found this trick:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
BUT all it does is fits the background to the full size of the display, not the browser. So if the display is 1366x768 and the browser is maximized, then the background is properly showing as "full". However if I then adjust the browser , the background image is not showing correctly.
So what do I need to do, so the background image is adjusted with the browser? So if the browser is 1300x700, the background image is 1300x700 but if the browser is 900x600 then the backgroud image is 900x600. Again, Im a newbie so please provide some examples.
cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover
100% This will scale 100% to both of height and width without any cropping.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
This may help you: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
And this https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
You can actually work around this by inserting the background image you want with height and width attributes on it and setting 100% width on it. Then you can place your content on top of that image.
<div class="container">
<img class="background-image" src="whatever.png" width="NATURAL WIDTH" height="NATURAL HEIGHT">
<div class="content">
This stuff will be on top of the image.
</div>
</div>
<style>
/* This element will == the height of the image */
.container {
position: relative;
}
/* This element is the background image */
.background-image {
width: 100%;
height: auto;
position: static;
}
/* This element contains the content which will be placed on top of the background image */
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
</style>