How can I stretch background image of a table cell with CSS? I have Googled it with no results.
When you set background image of a cell and the background size is smaller than the cell, then it will be repeated.
How can I force this background to stretch the entire table cell instead?
It is possible to stretch a background image using the background-size CSS property.
Examples:
body { background-size: 100% auto } /* Stretches image to full horiz. width */
body { background-size: 50% 50% } /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */
body { background-size: cover } /* Ensures that image covers full area */
body { background-size: contain } /* Ensures that image is completely visible */
All major current browsers support the feature:
IE since 9.0
Chrome since 3.0
Firefox since 4.0
Opera since 10.0
Safari since 4.1
You can't stretch a background image.
If you want to stretch an image, you have to put it in an img tag. You can use absolute positioning to put content on top of the image.
It is possible.
NOTE: This is using CSS3 and will not be supported by inferior browsers.
If you set your cell with this styling it should solve your problem. It will also allow for collapsible tables too because you're using %.
background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;
Related
How can I display a cover image at the top of a web page that stretches when the width of the screen is bigger than the width of the image, but that retains a fixed height?
Here is a page with the behavior I am trying to emulate.
http://outsite.co/san-diego/
Here is the link to the page I am trying to apply it to.
http://phrasemates.com/xcode-developer-language-app.html
Thanks!
That would be an element with specified height, and a large background-image with background-position set to 50% or center, and background-size set to cover or auto 100% (for some older browsers).
div.wide{
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
}
to add to what Isaac Lubow said, i would also add an overflow rules in there so it would look like
div.wide {
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
Adding overflow: hidden; will make sure that the image doesnt bleed anywhere. however it may not be necessary, just depends on your setup.
You could also set the width to 100vw and retain the set height of 500px. This would fill the width of the viewing window but retain your height.
I'm trying to set the background image using CSS but the original image is stretched.
How do I keep the original image size and set the background for the entire page at the same time?
body {
margin: 0;
background-image: url(background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The original image is: Original Image
And the result is: Resultent Image
The difference is the background in my web is larger than the original.
Any help would be appreciated !!!
All you have to do is to remove background-size: cover,
then all should be fine.
You have a lot of options regarding the background image and size.
For your needs you can check this W3c and try the different options you can apply.
Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.
The result also, depends on the screen resolution of the client.
You have to deside what is your desired result in all screen resolutions.
Try to remove background-size:cover; & set width of image to your requirement.
background-size:cover;stretches the image to full background.
or
Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.
What you can do is just remove, background-size:cover;
Now let's see what does that mean,
background-size
Because 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.
cover
A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover scales the image as large
as possible and maintains image aspect ratio (image doesn't get
squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions,
the image is clipped either left/right or top/bottom.
To get much identification just try JSFiddle
For the more reference on background-size:
remove background-size: cover;
Thanks.
I found the problem.
the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.
body {
margin: 0;
background-image: url(background.png);
background-size: 60% 60%;
background-position: center center;
}
Try like this:
.your-class {
background-image: url(background.png);
/* Required Height */
height: 800px;
/* Center and scale the image nicely */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
I am making a website, for my client.
Now, the website has background-image, on it's landing page, that looks very nic in all pc browsers, but there is one problem...
If you are not using google chrome, on all tablets and phones, it will make the background-image look very zoomed, and weird.
There is code(for css background-image, it should be responsive, but it is not in many browsers):
body {
height: 100%;
font-family: 'Open Sans';
font-weight:100;
color:#666666;
line-height: 1.7em;
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
Link to the website
Unfortunately background-attachment: fixed and background-size: cover don't work well together.
See this question and its highest voted answer. (Just in case the question might not be there in the future, here is the answer)
Unfortunately this is simply an artifact of how fixed positioning
works in CSS and there is no way around it in pure CSS - you have to
use Javascript.
The reason this happens is due to the combination of
background-attachment: fixed and background-size: cover. When you
specify background-attachment: fixed it essentially causes the
background-image to behave as if it were a position: fixed image,
meaning that it's taken out of the page flow and positioning context
and becomes relative to the viewport rather than the element it's the
background image of.
So whenever you use these properties together, the cover value is
being calculated relative to the size of the viewport irrespective of
the size of the element itself, which is why it works as expected when
the element is the same size as the viewport but is cropped in
unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment:
scroll and bind an event listener to the scroll event in JS that
manually updates the background-position relative to how far the
window has been scrolled in order to simulate fixed positioning but
still calculate background-size: cover relative to the container
element rather than the viewport.
Because phones are usually held in the palm with their greatest length going vertically (unlike desktop computers where they are mostly horizontal in length) the use of background-size: cover; might be exposing your image as a low-resolution image.
If the image is having to be scaled up to 'cover' your browser window, it may be having to pixelate the image, especially if the device has a very high pixel-density.
This image demonstrates the issue:
The solution to this problem would be to improve the resolution of your image.
Note that the issue would be most prominent if your desired background image was landscape in nature. If it was portrait, you may find the extremities of this problem to be reversed.
Looking for some help.
I'm trying to scale an image (.essentials) proportionately which is set as background in the css and applied to a div.
The image does resize proportionately when the window is made smaller but the problem is that the height to the div is kept the same leaving a huge gap.
I'm using modernizr for fallback to detect if svg is supported to get the svg image and if not to get the png image for IE8 and below.
HTML below
<div class="essentials"></div>
CSS below
.essentials{
margin-bottom: 5em;
height: 505px;
}
.svg .essentials{
background: url("../images/myEssentials.svg") no-repeat;
background-size: contain;
}
.no-svg .essentials{
background: url("../images/myEssentials.png") no-repeat;
}
Assuming the div has no content, use e.g.
padding-bottom: 50%; // 2:1 aspect ratio
To add support for IE6 and IE5, include
height: 0; // IE6 (hasLayout)
(If the div has content, you need an additional wrapper div. This is all taken from http://alistapart.com/article/creating-intrinsic-ratios-for-video).
I'm creating a new HTML5 page that has multiple image layers. The first layer is a background layer that is a full screen image (proportional to the screen size).
The second layer is another image object, which I want to be in a fixed position proportional to the first layer; so if I changed the browser size, both of the 2 images would change size so they are proportional one to each other.
Does anyone have any idea how can I do so?
So, let's suppose we have a "sky.jpg" background image and a "sun.png" image on top of it.
Here's the HTML(5) code:
<div id="sky">
<img src="sun.png" id="sun">
</div>
And here is the responsive CSS:
#sky {
width:100%; /* width in percentage, so it will adapt to user's screen */
height:600px; /* here i've set a fixed height, but maybe it's not what you want */
background:url(sky.jpg) top center no-repeat;
text-align:center; /* #sun will be centered, not sure it's what you need */
background-size:cover;
-moz-background-size:cover;
}
#sun {
width:15%; /* adjust it to the needed ratio */
max-width:300px; /* max-width will prevent it from being bigger than the original image */
min-width:20px; /* min-width is optional */
}
Live demo (resize the window)
Notice the background-size property set to cover (more info here).
It means that the aspect ratio will be preserved to the smallest size such that both its width and its height can completely cover the background positioning area.
That's why you need an image bigger than most of resolutions (if it's a body-background image).
Other possible values for this property are "contain" and "auto" (have a look at the specs).
background-size:cover; is not supported by IE8 (that's why we still add top center for background positioning) and for some FF versions you'll need a vendor prefix (-moz-)
Now you can set a width in percentage for #sun, so that it'll keep a ratio to its containing div. To prevent it from becoming bigger than the original size, you can set a max-width (and eventually a min-width).
The height of the image will auto-adjust in modern browsers.
If you don't want a fixed height on #sky, be sure that its container also has a height different than auto (the default value).
For example, if #sky is your page background image, you've to set:
html, body { height:100%; }
#sky { height:100%; }