I want my jumbotron background to automatically adjust its height to the screen resolution. At the same time, the width of the image would change only with the same ratio as height, and the rest of width would be hidden.
For example I have this image:
And it shows only part of its height and width.
<div id="j-ricardo" class="jumbotron">
<div class="container">
<h1>David Ricardo</h1>
<p>Najbogatszy ekonomista w historii</p>
</div>
</div>
<style type="text/css">
#j-ricardo {
background-image: url("obrazki/ricardo.jpg");
background-size: 100% auto;
height: 15%;
color: white;
text-align: center;
}
</style>
Background-size: contain; doesn't work like this (the image repeats itself). I want to use HTML and CSS only, no jQuery.
Use contain with background-repeat: no-repeat;
Related
Creating a little interactive "game" for my schoolproject. The background image is an image of an office. It will have some stuff in that image that are clickable. for example, there is a computer standing somewhere, so I can click on that part of the screen and it does something.
I currently have set the background on the page, and fits the screen nicely after settings it to cover and aligning it center, issue is only that after resizing it for a small amount the left and right-size start to cut off. I need to make the site responsive for some smaller screens.
How can I avoid the image from cutting off, and just have it perfectly resize? adding max-width/height doesn't seem to work, because it will turn the page blank.
HTML
<div id="pagina2">
<div id="pagina2Background">
<a class="computer">
<div class="computerHover">
</div>
</a>
<a class="bril">
<div class="brilHover"></div>
</a>
<a class="bord">
<div class="bordHover"></div>
</a>
</div>
</div>
CSS
#pagina2 {
width: 100%;
height: 100%;
}
#pagina2Background {
width: 100vw;
height: 100vh;
background-image: url(../img/bureau.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
You can use the padding bottom (or top) by percentage trick to keep a constant aspect ratio. For example, if your image has size: width/height = 4/3, you can use padding-bottom is 75%. See the code below:
div {
width: 100px;
height: 0;
background-image: url('https://api.time.com/wp-content/uploads/2019/12/CatFilterReaction.jpg?w=600&quality=85');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 40%;
}
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>
I have a background problem with my site.
The thought is not to use any media queries, but to set everything on a % so it will always be viewable on any device.
What my problem is that the background image does have the right css for the with but the height is determined by the content within the div.
I want the height to always be on it's max and scale proportionally.
So what I did is the following:
<body>
<div class="wrapper">
<div class="home_header">
<div class="home_header_quote">
<img src="images/home_header_quote.png" />
</div>
</div>
</div>
</body>
and my CSS
.wrapper{
max-width:1400px;
margin:0 auto;
}
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: 100% 100%;
max-width:1400px;
max-height:320px;
}
.home_header_quote{
max-width:100%;
height:auto;
}
I hope anyone can provide me with a non-JQuery solution
Change the background size to cover.
.home_header{
background:url(../images/header_home.png) no-repeat;
background-size: cover;
max-width:1400px;
max-height:320px;
}
Just as the title says. How can I get a background image, or even text to fill width wise, not stretch/squash vertically, and just show up once? I can't seem to figure this out. Thank you.
Edit: I also want the height to scale with the width of the picture proportionally, so it will not be skewed but scaled with the width.
If you only want the background img to fill the width without taking into account the height you can do:
.element-with-back-img{
background-repeat: no-repeat;
background-size: 100%;
}
but with this the img doesn't fill the height of element-with-back-img because the height will set to "auto"
By doing this:
.element-with-back-img{
background-repeat: no-repeat;
background-size: 100% 100%;
}
the img fills the height but if element-with-back-img has different proportions than those from the img, this one will change its proportions to fill the element-with-back-img
I recommend u to:
.element-with-back-img{
background-repeat: no-repeat;
background-size: cover;
}
this scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I hope this could help u
.test {
background-image: url(http://placekitten.com/1000/750);
background-size: 100%;
background-repeat: no-repeat;
background-color: lightblue;
height: 150px;
display: inline-block;
}
#test1 {
width: 200px;
}
#test2 {
width: 100px;
}
#test3 {
width: 300px;
}
.test:hover {
background-position: center center;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
Use css for the body:
body {background-repeat: no-repeat;
background-size: 100%;}
To fill width-wise, use 'background-size'. That allows you to enter two parameters - width and height, in that order. Use '100%' to fill the width, then a fixed value for the height (assuming you know what the height of your image is).
E.g. if your background image is 500px tall, then:
{
background-size:100% 500px;
background-repeat: no-repeat;
}
You can experiment for yourself here.
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.