More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?
While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}
However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.
EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.
You can use :
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
I'm not good in CSS. But just the idea: create background div with tiled background (using z-index) and scale it. It should work
Yes you can scale it but try using percentage.
background-size: 100%;
But you need to consider the different resolutions of a screen. 4:3 4:9 etc.
I would recommend you to use this jQuery script. jQuery Strech Background
Related
Since a little while we have the awesome background-size: cover and background-size: contain CSS properties.
What I'm looking for is a way to implement a combination of both. Lets call it the 'title-safe' area.
Basically in my background there is on each axis an area that is fine if it disappears/crops if the bounding box is not the appropriate size, but there's an inner area that absolutely must be visible, and we can use letterboxing to ensure this is true.
Some more info:
My background image has a 3:2 aspect ratio.
For example, this could be 300 x 200px.
Viewed on a 4:3 screen, this would become 266.66 x 200px
Viewed on a 16:9 screen, this becomes 300 x 168.75 px
The inner box inside both these 4:3 and 16:9 ratios is an area of 266.666 x 168.75 px. I want to make sure that if people watch the image on other/weirder aspect ratios that inner area remains visible at all times, and I'm calling this the 'title safe area'.
You can have 3 separate styles, and change them with media queries based on the aspect ratio
I have also changed the border color so that it's easy to know which style applies
html, body {
height: 100%;
}
.test {
width: 90%;
height: 90%;
border: solid 2px black;
margin: auto;
background: url(http://i.stack.imgur.com/ZmhEE.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* changed by media queries */
}
#media screen and (min-aspect-ratio: 16/9) {
.test {
border: solid red 2px;
background-size: auto 120%;
}
}
#media screen and (max-aspect-ratio: 4/3) {
.test {
border: solid green 2px;
background-size: 120% auto;
}
}
<div class="test"></div>
I figured it out.
Take the following example for a html document:
<div class="container">
<div class="inner">
</div>
</div>
The inner css class will get a background-image that's always in the 3:2 aspect ratio.
The container has the following CSS rules. Note that the width and height are static here, but they can have any value, including percentages You can tweak them to ensure that the system works.
.container {
width: 900px;
height: 450px;
overflow: hidden;
}
Then the inner css needs the following rules to behave correctly:
.inner {
/* Set the background image. Must be 3:2 aspect ratio! */
background-image: url('background.jpg');
/* Fill up the container.*/
width: 100%;
height: 100%;
/* This is the default in any browser, but many people set it to
border-box these days for every element. It must be "content-box"
for this to work. The key thing here is that the width/height
cannot include the padding.
*/
box-sizing: content-box;
/* Normal CSS contain behavior */
background-size: contain;
background-repeat: no-repeat;
/* Always go to the center */
background-position: center center;
/* This will cause the background to extend beyond the content and
into the padding.
*/
background-clip: padding-box;
/* These numbers are just based on trial and error and not exact.
I tried to figure it out with Math, but my math was wrong. These
are fairly close approximations.
Effectively the width + the padding becomes the total 3:2 image
and the total image MINUS the padding = the title safe area.
*/
padding: 6% 8% 6% 8%;
/*
These margins ensure that the image is still centered.
The overflow:hidden on the container element make sure that
there's no scrollbars.
*/
margin-left: -8%;
margin-top: -6%;
}
/* Responsive Full Background Image Using CSS
* Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
body {
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
/* Pick a solid background color that will be displayed while the background image is loading */
background-color: #464646;
/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
}
/* For mobile devices */
#media only all and (max-width: 768px) {
.logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/background-photo-mobile-devices.jpg);
height: 300px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
The background image shows up fine on a desktop browser but when I view it on my iphone 6 plus or any other mobile phone the image doesn't scale correctly and is partially cut off. Can anyone help? Thanks.
There are two ways to work on the background and make it work well:
You should delete the onset:
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
And
height: 300px;
width: 100%;
The first way to make the length or width is supported on the other by adding the following code:
background-size: 100% auto;
The second way to make the rear rubber with any size by adding the following code:
background-size: 100% 100%;
Thank you
Also you can use or add for more optimization:
html{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it will cover the all html or body base on the tag you want the image to cover.
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
I want to set a background image to different divs, but my problems are:
The size of image is fixed(60px).
Varying div's size
How can I stretch the background-image to fill the whole background of the div?
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
height:180px;
width:200px;
border: 1px solid red;
}
Check the code here.
Add
background-size:100% 100%;
to your css underneath background-image.
You can also specify exact dimensions, i.e.:
background-size: 30px 40px;
Here: JSFiddle
You can use:
background-size: cover;
Or just use a big background image with:
background: url('../images/teaser.jpg') no-repeat center #eee;
Modern CSS3 (recommended for the future & probably the best solution)
.selector{
background-size: cover;
/* stretches background WITHOUT deformation so it would fill the background space,
it may crop the image if the image's dimensions are in different ratio,
than the element dimensions. */
}
Max. stretch without crop nor deformation (may not fill the background): background-size: contain;
Force absolute stretch (may cause deformation, but no crop): background-size: 100% 100%;
"Old" CSS "always working" way
Absolute positioning image as a first child of the (relative positioned) parent and stretching it to the parent size.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalent of CSS3 background-size: cover; :
To achieve this dynamically, you would have to use the opposite of contain method alternative (see below) and if you need to center the cropped image, you would need a JavaScript to do that dynamically - e.g. using jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Practical example:
Equivalent of CSS3 background-size: contain; :
This one can be a bit tricky - the dimension of your background that would overflow the parent will have CSS set to 100% the other one to auto.
Practical example:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalent of CSS3 background-size: 100% 100%; :
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: To do the equivalents of cover/contain in the "old" way completely dynamically (so you will not have to care about overflows/ratios) you would have to use javascript to detect the ratios for you and set the dimensions as described...
For this you can use CSS3 background-size property. Write like this:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
Check this: http://jsfiddle.net/qdzaw/1/
You can add:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
background-size: 100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
You can read more about it here: css3 background-size
by using property css:
background-size: cover;
body{
margin:0;
background:url('image.png') no-repeat 50% 50% fixed;
background-size: cover;
}
Use:
background-size: 100% 100%;
To make background image to fit the div size.
To keep the aspect ratio, use background-size: 100% auto;
div {
background-image: url('image.jpg');
background-size: 100% auto;
width: 150px;
height: 300px;
}
Try something like this:
div {
background-image: url(../img/picture1.jpg);
height: 30em;
background-repeat: no-repeat;
width: 100%;
background-position: center;
}
This is my HTML:
<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>
user-avatar class is following:
#user-avatar {
width: 100px;
height: 100px;
margin: auto;
position: relative;
background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}
Frame:
#user-avatar img {
position: absolute;
top: 50%;
left: 50%;
width: 122px;
height: 127px;
margin-top: -62px;
margin-left: -63px;
}
Original user-avatar background image dimensions are 23x25 but I want it to be resized to the 100x100px, and the problem is that whatever I set in the width: xxx attribute it'll not work. The avatar that is behind the frame has everytime his original dimensions.
You can't resize an image set as background of a container. The only way you can resize a image is using a img tag and resizing it with width and height css attributes.
Take a look here may be it helps.
You could use background-size, however only the most current browsers support it: https://developer.mozilla.org/en/CSS/background-size
You can use the CSS3 background-size property, for those browsers that support it, then fall back to a compromise solution for older browsers. The compromise solution could be to set a background color to fill up the space around the background image or to use the background-repeat property to "tile" the image.
For example:
#user_avatar {
...
background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
background-size: 100px 100px;
}