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>
Yello,
Have been trying to figure this problem out for a while, asked a friend, a developer collegue.. No succes. Maybe one of you knows the answer?
I use an SVG image as background for my header:
CSS:
header {
height:200px;
width:100%;
background-image: url("../img/header.svg");
background-repeat: no-repeat;
background-position:0% 100%;
background-size: 100%;
}
HTML:
<header id="header"></header>
In every browser it displays perfectly but in IE(11) there is a space between the header and content on small screen sizes, the gap differs. I use Bootstraps responsive classes.
I am quite new to html and CSS, my problem is that each time I post a header image on my HTML file it doesn't fit across the screen. I try width: 100%; but then it messes up the resolution. Here is my current code:
HTML -
<div id="header">
<h1><img src="images/headings/titleheader.png"
width="800" height="150" alt="Munsterberg Designs" border="0" /></h1>
</div>
CSS -
#header {
height: 150px;
background: black;
url(../images/headings/titleheader.png);
}
Is there a way to take my image that is 760x150 to fit across the screen no matter the resolution of someones monitor?
<img> is HTML tag for placing an image into your HTML page/document
"background-image" is a CSS property. You place an image as background into a <div> for eg. not into a <img>
They are COMPLETELY different. Don't confuse both!
If you want the image as 100% width you should put it as 100% at image and header both, and remove "height" property, that's what is breaking the resolution:
#header{
width:100%; /* put header as 100% */
}
#header img
{
width:100%; /* put header's image as 100% */
}
<div id="header">
<h1>
<img src="images/headings/titleheader.png" alt="Munsterberg Designs" border="0" />
</h1>
</div>
If you see, I'm not using "background" or "background-image" because I don't want a background image , I have the actual image at <img> HTML tag
Now if you want the background css approach check for #mdesdev answer and remove <img> tag from your HTML document, you need to choose only one way.
<div id="header">
</div>
#header {
height: 150px;
width: 960px; /* For demo purpose */
background: #000 url(../images/headings/titleheader.png) no-repeat;
background-size: cover;
}
You do not need to add the image within the div in the HTML.
<div id="header></div>
In the CSS, indicate the height and width. To get it to fill the entire width, try using background-size: cover
#header { height: 150px;
background: black url("../images/headings/titleHeader.png") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
This is untested but it should be something similar to this.
This link should also help you
i am creating a website on my mac book 13 inch the background image i am trying to use is too big for my screen is their a way to keep the aspect ratio the same when developing on my screen so it will look the same scaled up or scaled down
i have used this code to scale the background image to fill the whole screen
background: url(images/background.jpg) no-repeat center center fixed;
background-size: cover;
background-size: cover;
background-size: cover;
background-size: cover;
i have used a page wrap to wrap the content
#wrapper {margin: 0 auto 0 auto; width:1070px;height:auto;
but it just comes out over lapping the image which is not ment to happen the ration is off because the wrapper is the same width as the space left for it but it overlaps the background image is 1772x1240 the width of the green box is 1070 is their a way of designing and keeping those ratios
Use,
background:url(images/background.jpg) 0 0 no-repeat;
background-position:fixed;background-size:100%;
I am not specific to requirement, but if you are really looking for something that is reusable layout, then follow this. It works in all modern browsers
HTML
<div class="table">
<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
<div class='cell'>4</div>
</div>
</div>
CSS:
.table{
height: 50px;
width:100%;
background-color:Red;
display:table;
table-layout:fixed;
}
.row{
display:table-row
}
.cell{
display:table-cell;
line-height:50px;
text-align:center;
}
And a Demo, try to resize the page
Is there a way to get a background in CSS to stretch or scale to fill its container?
Use the CSS 3 property background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
This is available for modern browsers, since 2012.
For modern browsers, you can accomplish this by using background-size:
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover means stretching the image either vertically or horizontally so it never tiles/repeats.
That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).
For it to work with lower verions of Internet Explorer, try these CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.
Use this markup:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
with the following CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
and you should be done!
In order to scale the image to be "full bleed" and maintain the aspect ratio, you can do this instead:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
It works out quite nicely! If one dimension is cropped, however, it will be cropped on only one side of the image, rather than being evenly cropped on both sides (and centered). I've tested it in Firefox, Webkit, and Internet Explorer 8.
Use the background-size attribute in CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDIT: Modernizr supports detection of background-size support. You can use a JavaScript workaround written to work however you need it and load it dynamically when there is no support. This will keep the code maintainable without resorting to intrusive CSS hacks for certain browsers.
Personally I use a script to deal with it using jQuery, its an adaption of imgsizer. As most designs I do now use width %'s for fluid layouts across devices there is a slight adaptation to one of the loops (accounting for sizes that aren't always 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDIT:
You may also be interested in jQuery CSS3 Finaliz[s]e.
Try the article background-size. If you use all of the following, it will work in most browsers except Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.style1 {
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;
}
Works in:
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
In addition you can try this for an ie solution
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Credit to this article by Chris Coyier
http://css-tricks.com/perfect-full-page-background-image/
Not currently. It will be available in CSS 3, but it will take some time until it's implemented in most browsers.
In one word: no. The only way to stretch an image is with the <img> tag. You'll have to be creative.
This used to be true in 2008, when the answer was written. Today modern browsers support background-size which solves this problem. Beware that IE8 doesn't support it.
Define "stretch and scale"...
If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.
Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.
If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.
As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...
If you're using vector graphics, you're way outside my realm of expertise I'm afraid.
This is what I've made of it. In the stretch class, I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Add a background-attachment line:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
I would like to point out that this is equivalent to doing:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
Another great solution for this is Srobbin's Backstretch which can be applied to the body or any element on the page - http://srobbin.com/jquery-plugins/backstretch/
Try this
http://jsfiddle.net/5LZ55/4/
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Use the border-image : yourimage property to set your image and scale it upto the entire border of your screen or window .