My background image is scaling down as the window width decreases. I want the image to be full image regardless of the display. How would I implement that? The following code scales the image, then starts only show a section.
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center !important;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
If I'm reading your question right, simply set your header width to the width of the image.
If you are trying to full width background image for your header(Hero Header).
Try these code examples.
Demo Link
this is my first question on here so I'm sorry if I don't quite get the terminology.
I have a background image that is serving as a logo divider for the footer information, which I made 2,400px wide so it would display fully across multiple screen sizes. Only problem is that there is a large bottom scroll to the webpage and I would just like it to constrain to the window width, and show more as someone may adjust the webpage width to be larger, or less and it constrains down to be smaller. The closest I got to achieving this was when it was constrained to the width of the window, but it distorted the image.
This is the CSS I'm using currently, it may contain quite a bit of excess elements that are not helping me, I had scoured google for solutions but resorted to coming here.
footer {
overflow: hidden;
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
background-size: 2400px 68px;
background-size: cover;
background-position: 50% 50%;
}
Have you tried changing the background-size to contain?
footer {
background: url(../img/aperture_labs_bot.png) no-repeat fixed;
background-image: url(../img/aperture_labs_bot.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
I hope this helps...
Try this:
background: url(../img/aperture_labs_bot.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This way it has the width of the entire screen, and scales when you make the screen smaller.
edit;
HTML:
<footer>
<div class="footer-test">
This text will be placed in the footer div. The div class footer-test will have a full-size background image no mather what width it has.
</div>
</footer>
CSS:
.footer-test {
background: url("http://www.cossumswimschools.co.uk/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100px;
}
Let me know!
I have a div with background-image set to data:image/jpeg;base64 format:
<div style="background-image: url(data:image/jpeg;base64,/9j/4AAQ...
I would like to show full image respecting aspect ratio, using available space. I would normally use:
width: 90vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
In this case image is stretched using full div size. Any suggestions?
Update:
Div with data:
http://jsfiddle.net/witepo/bksmhtwc/
Update 2:
expected result: http://1drv.ms/1uTj8Nd
Div: http://codepen.io/anon/pen/LEZPjj
try this
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
I have an 4:3 aspect ratio image to put as a background-image.
My first aim is to have a full height image, resizing accordingly to the height, with variable width (depending on the height). The image should be centered.
For example, if I have a 16:9 viewport it should display the background-image centered with left and right blank spaces.
I tried different method (using as example 4:3 image with 16:9 viewport).
First of all, background-size both with contain and with cover applied to the <body> tag:
with cover it respects the aspect ratio but crop the image at the top and at the bottom
with contain it doesn't cover the whole viewport, but actually only the body
Also using background-size: auto 100%; produce the same effect as contain
This is the CSS code I used:
body#home {
background-image: url(../bg.jpg);
background-size: auto 100%;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;
-o-background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
Thanks to #Pete, with this code it actually works:
html, body {
min-height: 100%;
}
body#home {
background-image: url(../ppersia-home.jpg);
background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Now I've just to add some other background pattern to avoid monochrome color in the left and right blank spaces
Update your css:
background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.