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%);
}
Related
I have a container and wallpaper inside a page.
What I'm trying to do is to resize the container and the wallpaper to mach any device screen size.
I have managed to make the wallpaper working, but the container doesnt work for me.
What I'm doing wrong?
This is my code:
html,body{height:100%}
#left-link {
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
width:auto;
height:auto;
}
#container {
width:500px;
margin:0 auto;
margin-top:10px;
position:relative;
z-index:100;
}
body {
margin: 30px 0 0 0;
background: url(https://example.com/.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
The container is set at 500px, which is a set size. If you want it to be responsive, set it to a percentage such as 50%, which would be half of the page.
You seem to have hard-coded the container to remain 500px at every viewport width.
This can be solved by the more general solution of never using absolute units for anything.
Anything like "px", "in", "cm" are absolute units and should be avoided.
Instead use relative units: "em" (or if you must, "rem") when legibility is the main concern (e.g. reading some lettering in an image); and "%" (or "vh" and "vw") when overall layout is the main concern.
Your example has "500px", "10px", and "30px".
It would be more "responsive" if instead it had, say "90%", ".5em", and "4%".
And to make things fit into containers the way you would expect them to:
* { box-sizing: border-box; }
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>
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.
I am trying to tell my CSS code that, if the browser is resized then resize the logo size also.
So here is what I have done:
#logo {
background:url('../images/logo.png');
background-repeat:no-repeat;
max-width:423px;
max-height:99px;
width:100%;
height:100%;
display:inline-block;
}
I would be grateful if someone could tell me how to fix this problem? I don't understand what i am doing wrong.
In my HTML i have this: <div id="logo"></div>
The logo is not displaying unless i take away width:100%; height:100%, i must replace it with the exact size in pixels.
Edit: I am trying to shrink the logo when the browser is resized to a smaller size, hope this makes it more clear however, it does not display right now.
Thanks.
You have a max-width and a max-height. Obviously, if the logo's 100% of each is higher than the amount you set, it will not grow any more.
You probably can play with
background-size: contain;
Try to resize Result fame (make it very small width) here http://jsfiddle.net/f6F86/
You can place an absolute img tag to be the background of the div with max-width & max-height applyed in percentage. that way, when you resize the page, the div shrinks and cause the img to shrink.
see this fiddle: http://jsfiddle.net/avrahamcool/j5Kwr/2/
What you need to do is set width:423px; and height:99px; and for max-width:100%;
You can try placing the image directly in your HTML markup. This makes the requirement of a set width and height redundant.
CSS
#logo {
max-width:423px;
max-height:99px;
width:100%;
height:100%;
display:inline-block;
}
HTML
<div class="logo">
<img src="link_to_image_here" alt="" />
</div>
try this:
#logo {
background:url('../images/logo.png');
background-repeat:no-repeat;
width: 100%;
max-width:423px;
height: 99px;
max-height:99px;
background-size: 100% auto;
background-position: 0 0;
display:inline-block;
}
Hi I have two columns of content within a container, the first column has text and the second is a span with a background sprite image. The problem is when I get to smaller screen resolutions, I want the background sprite image to have a width in percentage to be able to scale it along with the H5 with a percentage width, is there a way to do this?
h5{
float:left;
display:block;
width:800px;
}
.sprite{
background-image: url("assets/img/website_sprite_a.png");
background-position: -60px -60px;
float:left;
display:block;
width:64px;
}
<div class="container">
<h5>Title
</h5>
<span class="sprite">
</span>
</div>
In your case I would go with a single background-image, but in the case you will have a lot of images or you really want to do this you can use the background-size property.
From MDN:
The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.
.sprite{
background-image: url("assets/img/website_sprite_a.png");
background-position: -30% -30%; //use % instead pixels
float:left;
display:block;
width:64px;
background-size: 100%; //play with this
}
You also should read this:
Scaling background images
I have played a little bit with this on JSFIddle. Resize the browser to see the effect.
nearly a year too late, but I was trying to figure out the same and wasn't able to come up with or find a direct answer. After a little fooling around with multiple pieces of advice, I figured it out. Haven't had a chance to test this on IE8 yet, and stopped bothering with IE6/7, so please bear that in mind.
The trick I found is to use a combination of background-position (using percentages—of the sprite image—as mentioned before), padding-top (again, using percentages—this is the percentage of the total width of the sprite image), and background-size: cover.
Play around with it at jsfiddle.
#wrapper {
position: relative;
width: 100%;
}
.div {
position: absolute;
top: 0;
left: 0;
background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: cover;
padding: 50% 0 0 0;
width: 40%;
}
<div id="wrapper">
<div class="div"></div>
</div>