I have a background image with size 1x947 px,
the problem is it's a gradient color, so i only use repeat-x,
but when the page height over 947 px, it shows it background
color,
background-image:url(bg.gif);
background-repeat:repeat-x;
how to stretch it?
here's the code example on fiddle http://jsfiddle.net/K9cUd/1/
Hard to tell without the code or an example.
You could use CSS3's
background-size: 100%;
which should stretch it to the entire page size.
You might need to do
background-size: 0 100%; or background-size: 0% 100%;
so the width does not change.
You can read more here: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
And the spec: http://www.w3.org/TR/css3-background/#the-background-size
If you don't want to use percentages use:
background-size: cover;
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 wanted to stretch or fit my background image using css so it is always in 100% of width and height no matter what the screen size is. This is asked many times and everyone suggests to use background-size:100% and it will work. but using background-size only fits my image's width and the height is still cropped.
I'll appreciate if someone can help me with this.
Thans very much
EDIT:
You tried background-size: 100%,
CSS interprets this as 100% width, automatic height which will look like this:
background-size: 100% auto;
What you want is the second argument (height) to be 100% too, so you should do this:
background-size: 100% 100%;
END EDIT
Try:
background-size: cover;
This will fit the width or height and overflow the rest
Or:
background-size: contain;
This will make the image as large as possible without changing it's aspect ratio.
You can read more about the css3 background-size property HERE
You can try:
background: url('Your image URL') 100%;
or
background: url('Your image URL') 100% no-repeat;
Try this CSS rule:
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center
background-size: cover; // this makes img full-screen (full-width & full-height)
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;