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.
Related
I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
That should do the trick! :)
Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)
I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.
Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
I'm creating a website for a friend of mine.
We got these layout and i've put a flexible background which scales to the current browser size. But the icons placed on the background needs to stay in relative position while scaling the window.
Means if i resize the window it would be fine to have the icons stay on there position.
#icon1{
/*Back*/
position: relative;
//margin-top: 20%;
//margin-left:10%;
widht:20%;
top:20%;
z-index:10;
}
html, body {height: 100%;
// width: 1600px;
margin: 0 auto;
overflow:hidden;
}
#inhalt {height: 100%;
// width: 1500px;
margin: 0 auto;
background: url(wp-content/themes/html5blank-stable/img/bg_small.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
z-index:0;
}
Example
At the moment the icons are fixed at their position.
Thank you for your hints
With the comments from #Paulie_D, I managed to achieve this by, instead of using a backgroud-image for the map, I used an actual image with an img tag. By using an actual image, I the icons scaled to the size of the image (since now the image determines the size of the container). When I used the background image, I had to manually set the height or width of the container, which might not be the actual size of the image.
i am working on a bootstrap-based website and i have placed a big image on top of it.
<div class="container-fluid introimage">
<img src="img/wald.gif">
</div>
Now i want the container to be only as high as the browser-window is and i like to have the image to be aligned on bottom of the container, to get sure, that the bottom of the image is always visible.
I've tried something, but it did not work at all:
.introimage {height: 100%;}
.introimage img {vertical-align: bottom;}
Could you please help me? Thanks in advance!
This is the website: http://baustelle.injuvik.de
Put the image in the background of the container.
Simply apply these styles to your website, and it should work
body, html {
height:100%;
}
.introimage {
height: 100%;
background-image: url(img/wald.gif);
background-size: cover;
background-position: bottom;
}
use min-height:100% with height:100% on body
.introimage {
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
min-height: 100%;
}
Use the unit vh . It represent viewport height, and go from 0 to 100.
.introimage{
height:100vh;
}
Add following rules in your style sheet, What I have done is set the container to position fixed; so that it works w.r.t screen and made its height, width 100% so that it covers complete screen, then I aligned the element from top left corner and in the last set the image to cover complete parent div thus indirectly covering compelte browser window.
.introimage {
height: 100%;
position:fixed;
top:0;
left:0;
width:100%
}
.introimage img {
height:100%;
width:100%
}
I would recommend using the newer vh measurement for your stage, which will make any element the height of the veiwport with a value of 100.
.introimage {
position: relative;
height: 100vh;
background-color:transparent;
}
I would then use that image as a background image as opposed to just an image tag. I'd probably add it to the after pseudo-element of .introimage.
.introimage:after {
content:'';
display:block;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background: url(images/bg.jpg) no-repeat center bottom 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/
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;
}
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%