Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
Related
I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;
How to increase a background size automatically when a new item is added to its page dynamically.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
}
#mid {
background-image: url(scripts/white.png);
width: 950px;
margin-left: 210px;
height: 1700px;
}
HTML
<div id="container1">
<div id="mid">content goes here</div>
</div>
I am unable to increase the background size beyond the height it defines even if I define it as auto not able to increase the size automatically when a new item is added.
please help I am in a need of it for my college project.
Thanks in advance waiting for your replies.
The div #container takes up the height of its child element, i.e, #mid, which in this case has a height of 1700px. Thus your content is overflowing from that div element(#mid).
You can either remove the height property from #mid, or have an overflow-y: scroll;.
Use background-size property. It might be help you.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
background-size: 100% auto;
}
I believe a div if not styled to have definite height and width will grow and shrink according to the elements within the div.
add background-size: auto 100%; this value to #container1 div in css
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/
I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:
This image is 413 x 300.
If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:
Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:
EDIT
my understanding if #img_preview{width:200px;} is applied it would result in this:
example here:
http://jsfiddle.net/cnWqQ/5/
css like this:
#img-wrap{
height:200px;
width: 200px;
background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
background-size: cover;
background-position:center;
}
html like so:
<div id="img-wrap"></div>
Works by putting the images as the background in a div, works for all image shapes and sizes consistently.
it involves some css3.
You can do it in CSS, but it will only work with modern browsers :
You'll use background-image property :
<div id="myImageTrimed">
</div>
and the css :
#myImageTrimed {
background-image: url('img/youImage.jpg');
background-position: center; /* to make sure it trims the borders */
background-size: cover; /* As large as possible */
height: 200px; /* But only 200x200px are shown */
width: 200px;
}
Please comment if you have more browser constraints.
Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.
#img_preview{
width:200px;
}
You can mask the image with a div:
Your div:
height:200px;
width:200px;
overflow: hidden;
Your image:
position:absolute;
height:inherit;
margin-left:-15%;
see this demo below: http://jsfiddle.net/jRCgP/