I'd like my header image to scale with the browser size.
This is my current code for the att. screen grab, but this doesn't scale the image on smaller screens. Ive tried using the background image options but this doesn't achieve the look I want.
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
}
.header {
width: 100%;
padding-top:50px;
margin-top:-10px;
}
& HTML
<div align="center"><!-- big image -->
<div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class-->
The second image is roughly what shows on smaller monitor, the image hasn't scaled & layout looks odd - Id like to scale the horse head so that the full image still shows. It seems to work on Android & tablet, just not smaller monitors?
Just try this (It fits the size of the image so that it exactly covers the screen.):
.header-image img {
width: 100% !important;
}
Example: http://jsfiddle.net/leo/qsMKf/
Your image won't scale down with width:100%; it will only scale up so whatever the size is of the image it will stay. You need to use a "media query" and then set a different % there.
Something like:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
}
input the id into div like this (use only one div)
HTML:
<div id="header"> </div>
CSS:
#header{
background-image:url(../images/liveryHeader3.jpg);
background-size: 100% 100%;
}
OBS: into background-size, the first value is to width and second is to height
for more information : http://www.w3schools.com/default.asp
code you provided doesn't scale image as it seen on screenshot, so you first should look at place where it is really stretched
anyway, check max-height:1000px; in css - this can limit, and of course you should add width:100%;height:100%; to your image and outer div as well
I hope i understand well what you really want.
You have to set max-width at 100% on your image and on it parent.
So your css for those element would look like this:
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
max-width:100%;
overflow:hidden;
left: 0;
right: 0;
z-index:-1; /*places header image behind text */
border:10px solid #545351;
}
.header-image img {
max-width:100%;
}
If you put the actual image into the css as a background element and then set background-size to contain it should make it fit to the exact screen size.
something like this:
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
background: url(*IMAGE URL HERE*) no-repeat;
background-size: cover;
}
See how that goes.
Related
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
I have 2 problems with WP IE :
transparent background-image have artifacts on their transparent borders
absolute positioned divs to the bottom of the page leaves a ~5px white gap between the browser navigation bar and the bottom of the page
Note that I use divs instead of img to handle CSS retina image replacement for HDPI devices (iPhone 4+, iPad3+, Android Galaxy S3, WP8 Lumia 920...). With img, the artifacts are gone.
HTML:
<div class="header-left"></div>
<div class="footer-left"></div>
CSS:
.header-left {
position: absolute;
top:0;
left:0;
background-image: url('../img/bkg_header_left.png');
background-size: 92px 79px;
width: 92px;
height: 79px;
}
.footer-left{
position:absolute;
bottom:0;
left:0;
background-image: url('../img/bkg_footer_left.png');
background-size: 315px 50px;
width:315px;
height:50px;
}
/* DPI specific CSS
* retina image replacement */
#media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.header-left {
background-image: url('../assets/bkg_header_left#2x.png');
}
.footer-left{
background-image: url('../assets/bkg_footer_left#2x.png');
}
}
Simple sample page based on HTML5 boilerplate (i.e. includes a CSS for normalisation/reset) :
http://file.rspreprod.fr/wp-ie-bugs/index.html
For those without Windows Phone, here is a capture of the result on WP7.5 :
Ok so the image artifacts can be solved using :
background-repeat:no-repeat;
Still looking at the white gap, seems to be the body's fault for some reason I can't figure.
With regards to the white border - it looks like either your <body> or <html> tag has a margin or padding setting applied. If either of those tags also has positioning, such as position: relative - you can easily see this behavior.
The reason is that position: absolute is always actually relative to the nearest positioned parent. For more information on that, check out this fantastic article.
If that is, in fact, the problem - you can try the following potential fix:
html, body { margin: 0; padding: 0; }
This will strip the spacing from around the page's edge, and hopefully bring your content flush with the edges of the browser.
I'm having trouble nailing down a solution to this.
I have a div with a repeating background image that's 100% across the screen. So lets say:
.services_wrap {
width:100%;
height:200px;
background:url('../images/services_tile.png') repeat-x;
}
<div class="services_wrap">
//Content
</div>
How do I specify a media query that will scale that entire div down when the screen is resized, like for a normal div it would be:
#media screen and (max-width: 650px) {
/*Makes the logo shrink*/
#header {
height:auto;
}
}
But If I try this with .services_wrap nothing happens.
I have tried background-size: properties with no luck.
Is it possible to scale a repeating image?
Use background-size
div {
background: url("//www.placehold.it/50x50") repeat-x;
}
#media screen and (max-width: 900px) {
div {
background-size: 25px;
}
}
Demo
I'm using
background-size: 100%;
To fit my background image (in the body-tag) to the browser window.
But is there a CSS3 background-property to set a minimum-size?
Or will I need some div-"trick" like:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
I think you are looking for
background-size: contain;
OR
background-size: cover;
The difference being that cover specifies that the background image should be as small as possible while maintaining its aspect ratio. contain on the other hand specifies that the background image should be as large as possible.
See the MDN documentation here.
How about adding this:
#media screen and (max-width:700px){
#bg img { width: 500px; /* fixed width under 700px */ }
}
A bit late to this question but for anyone wondering, now you can!
Say you want to have a background image take up 100% height of parent but also have a minimum height of 200px (e.g. in case parent height is less than 200px).
We can use max() to get the maximum value from two numbers so if 100% height > 200px it will use 100% but if not it will stop at 200px effectively making 200px the minimum height.
body {
background-size: 100% max(200px, 100%);
}