I'm trying to make a "Did you know?" fixed div in the right corner. Unfortunately after 3 hours of testing many solutions still can't find correct one. As you can see on this fiddle:
http://jsfiddle.net/dq8f3d4p/ I can't make the background fit the div.
Both: background-size: cover; and background-size: 100%; seems not to work properly.
In your code, you are overwriting background-size with the shorthand background property :
.dyk{
position: fixed;
z-index:2;
width: 17.26%;
height: 11%;
left: 80%;
top: 80%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/gxp9iDV.png);
}
Changing it to background-image property will cause the image to stretch to 100% size.
You are probably looking for background-size:contain;, Which is usually the best pick, however, in your case the image proportions and the div's proportions are not the the same so I would recommend using background-size: 100% 100%;.
background: url(http://i.imgur.com/gxp9iDV.png);
background-size: 100% 100%;
background-repeat: no-repeat;
Working jsFiddle
Notes:
background-size is supported by IE9+
Use contain if you don't want your image to get streched.
put the image inside you div and then fix the div to bottom right
<div class="dyk">
<img src="http://i.imgur.com/gxp9iDV.png"></img>
</div>
.dyk{
position: fixed;
z-index:2;
right: 0;
bottom: 0;
}
Related
I have this short example:
CODE CSS:
body{
background:url(DECUPATE/TEST/images/ppp.jpg);
bacground-size:contain;
backgoun-repeat:none;
}
I put a picture to understand what they want to do.
http://i61.tinypic.com/10xeeeb.jpg
if you put background size: cover appears to the end but there is the incomplet image.
How can I solve this problem?
Thanks in advance!
You have to use html instead of body ,see the code below :
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100% cover;
-moz-background-size: 100% 100% cover;
-o-background-size: 100% 100% cover;
background-size: 100% 100% cover;
/* set the padding and margin to "0" */
margin: 0;
padding: 0;
/* set the position rules */
top: 0;
left: 0;
}
You can use jquery plugin backstretch for this
this will allow background to stretch through out the screen. it also works well with smaller screens.
http://srobbin.com/jquery-plugins/backstretch/
download backstrech js from the url given above and add it in your header tag .
initiate backstretch with following code in script tag
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
Take a look at this example, for the most broad support :
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
https://css-tricks.com/perfect-full-page-background-image/
Don't think of it as one background. Give your header and footer the background-img and set the header position to background-position:center top and your 'footer' position of background-position:center bottom additionally add the background-size property to 100% or cover. Since both elements have the same width the size property will have the same effect on both.
Add the CSS code background-attachment:fixed;
This will make the background stay the same if you scroll down.
<body> <img src="images/ppp.jpg"> </body>
body{
margin: 0;
padding: 0;
}
body > img{
width:100%;
height: 100%;
/*For IE*/
top: 0;
bottom: 0;
position: absolute;
}
I have a large background image that is fixed with text being displayed on top of it, however the bottom of the image is being clipped off. I want the image to be displayed completely and not be cropped off.
#content {
background-image: url(../images/bean.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Set background-size to be 100vw 100vh i.e background-size: 100vw 100vh;
#content {
background-image: url(http://lorempixel.com/1400/1400/sports/3/);
background-repeat: no-repeat;
background-size: 100vw 100vh;
background-attachment: fixed;
height: 40em;
margin-top: 0;
padding: 0;}
Checkout this DEMO: http://jsbin.com/buqaju/1/
To have the background always cover the whole container you can use:
background-size: cover;
Source: http://css-tricks.com/perfect-full-page-background-image/
Pay attention to browser support: http://caniuse.com/#search=background-size (hint: No IE8)
Also, I noticed it's not very performant on pages with a lot of transparencies and moving backgrounds, but other than that I use it quite a lot and it works well.
Increase the height?
height: 100em;
you have
background-size:100%;
use
background-size: 100% 100%;
.bg_care{
background-image: url(../img/care-area.jpg);
background-size: cover;
}
just use background-size as cover it wont cut off.
You could also modify your background as such:
background: url(xyz.jpg) no-repeat **center center** fixed;
where you change the center values as needed (left,right,bottom,top). Depending on the image it may be useful.
I'm trying to setup a new bg on my website, but I can't make it work. Basically I have a picture (size 50x2000 px) and I want to create repeated background. In my CSS I used :
#test{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
}
And it's partly working, I can see that the bg is repeated but there is a problem with hight. My web browser should squeeze the hight of the picture to fit the whole picture in a website, and right now I can see only the top of the picture, it's because the picture hight is too big 2000 px. So what I have to change in my CSS code to make the bg fit in to my website ?
Thanks
Update your CSS as
#test
{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
well background-repeat:repeat-x; should be background-repeat:repeat-y; if you want to do it vertically. look hear
edit, try to remove those absolut and other options so the browser can handle the rest:
#test{
background:url(images/bg.png);
background-repeat:repeat;
}
add this to your css
height:2000px;
as in:
#test{
width: 50px;
height: 2000px;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
}
it should solve your problem.
UPDATE:
this is the Fiddle. the image you use in your fiddle is 900px so I set height to 900px.and I think your problem is solved.please explain more about your problem if it is not it.
Q : why do you need absolute position ? remove it.
How to make this image responsive
HTML:
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>
CSS:
#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}
Use background-size property to the value of 100% auto to achieve what you are looking for.
For Instance,
#first .smashinglogo{
background-size:100% auto;
}
Hope this helps.
PS: As per your code above, you can remove fixed and add 100% auto to achieve the output.
Try adding background-size:cover
.smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;
background-size: cover;
height:600px
}
Check this tutorial for detailed article.
try this :
background-size:100% auto;
or
background-size: cover;
Instead of fixed Use
max-width:100%;
this will work.
Final Output
.smashinglogo {
background: url(../images/logo1.png) 50% 100px no-repeat;
max-width: 100%;
}
#first .smashinglogo{
background-image: url(../images/logo1.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
try this, it might work for you.
Making a Responsive image there are many ways.
The Basic rule is use % value instead of pixel value. and second is use #media queries to target the mobile devices and tablets.
Also you can use CSS3 new technique to make the image responsive:
.img-element: {url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can read more about Responsive image by clicking on this link.
http://css-tricks.com/which-responsive-images-solution-should-you-use/
I'm just summarising with an answer that helped me along the same lines.
.smashinglogo {
max-width: 100%;
background-size:100% auto;
}
.smashinglogo {
max-width: 100%;
background-size:cover;
}
Both the codes above worked really well.
If you div background-image disappears when stacked on small devices (typically below 577px in width), then add "min-height:310px;" to your css.
I have a large image I would like as my background, but for some reason it repeats a little bit on my large screen. Is there a way I can just have the image size up or down according to screen size?
EDIT: So I have changed my HTML to look like this:
<body id="wrapper">
<div id="body">
<img src="/images/sky2.jpg" class="stretch" alt="" />
</div>
and my CSS to this:
#body {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
And the background won't show on preview. I have 3 other div elements that show but only to a white background =/.
move background-repeat: no-repeat; to the #body instead of #body img
You aren't actually showing any of your html here, just some embedded CSS and some (I assume linked?) CSS. You are loading the image as a background-image on the body element in that first bit of css, which is great. Because it's loaded as a background-image in CSS, and not and tag in HTML, your second bit of CSS (with the #body img selector) is not affecting it in any way.
What you actually have, in effect, is this:
#body {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
position:relative;
background-image: url(images/sky2.JPG);
}
Which is a very odd bit of code. But the only relevant part to your question is the background-image part. The answer has several parts. In CSS2: no, you cannot adjust the size of a background image. You can set it not to repeat (as others have shown) and you can set it's position:
body {
background-position: center left;
}
In CSS3 you can change the size, and you have several options (you are looking for cover, I think) but it only works for the latest browsers. The property is called background-size, but because it is still experimental, you have to declare it individually for each browser:
/* this is the default */
body {
-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
/* this will size the image proportionally so that it is contained, but not cropped */
body {
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
/* this will size the image proportionally so that it fills all the area */
body {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* this will size the image as a percentage of the area */
.example #percent {
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
}
/* this will size the image to exact specifications */
.example #absolute {
-moz-background-size: 100px 25px;
-webkit-background-size: 100px 25px;
-o-background-size: 100px 25px;
background-size: 100px 25px;
}
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Demo page:
http://css-tricks.com/examples/ImageToBackgroundImage/
Source:
http://css-tricks.com/how-to-resizeable-background-image/
I think it's worth to read that page :)
1) The CSS property background-repeat: no-repeat; should be on the body element itself, i.e. on the element you're specifying the background of.
2) In the CSS, you write #body... I guess you want to talk about the body element? Then you should just write body in the CSS. #body would be for an element declared as, say, <div id="body">.
3) Also, I'm unsure about #body img. #body img means “an img element inside the body”. Do you really have an img element inside the body? I mean, is your markup like this?
<body>
...
<img ... >
...
</body>
And do you really want to style that img element?
Anyway, the style that applies to the img element has nothing to do with the body's background.
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}
</style>
You need to set it for the same element or class or whatever.
Also you could move the body css into your css.
Ok, I'm sorry there are some other things wrong, like #body {. I don't think you have an element with an id "body".
Not trying to RTFM, but maybe read some tutorials on CSS?
To scale the image, maybe have a look at: Stretch and scale a CSS image in the background - with CSS only