I'm trying to make my site with 2 backgrounds,
first background in top and second one in footer, currently im using the below code:
body {
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
}
this css is working well when page is bigger than screen height, but i have some of pages with about height 500px and in these cases bgfooter isn't showing in footer,
i like to add something like this,
body {
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
min-width: screensize;
}
any option?
You can set a dubble background in CSS3
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
Set the background img to the body and then set a separate background img for the footer.
body {
background: url(images/bgheader.png) top center repeat-x;
}
#footer {
background: url(images/bgfooter.png) bottom center repeat-x;
}
Your HTML
<html>
<body>
<div id="footer">
</div> <!-- END OF FOOTER DIV -->
</body>
</html>
Now that you have set the background img to footer you may adjust any other attributes to the footer and body to your preference.
Related
How can I create a CSS background consisting of an image covering the top x pixels of the body and a solid color or gradient below (also spanning behind the top bg picture if it is transparent)?
A gradient can be stacked placed on top of a solid color, so that the gradient fills the entire height of the screen. How can I change the gradient to a picture and only make it x pixels high?
background: linear-gradient(0deg, rgba(239,237,224,1) 30%, rgba(255,255,255,1) 100%) top/100% 100vh no-repeat rgba(239,237,224,1);
Use a pseudo element for the image:
body {
min-height:100vh;
margin:0;
position:relative;
background:linear-gradient(red,blue);
}
body::before {
content:"";
position:absolute;
height:100px; /* update this */
inset: 0 0 auto;
background:url(https://picsum.photos/id/1069/800/600) center/cover;
}
You can have multiple background images - with a mixture of actual images and gradient images.
The first image in the list is rendered on top of the others and so on down the list. You can set the size and positioning and repetition of each separately or together.
In this snippet the individual settings are separated out to make it clearer what is going on:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://i.stack.imgur.com/ew6J2.png), linear-gradient(to bottom, red,blue);
background-size: 30vw auto, 100% 100%;
background-position: center top, 0 0;
background-repeat: no-repeat;
}
<div class="bg"></div>
Is there a way to set a background to be fixed to the center, and to the bottom, but not flush with the bottom of the element, rather 100px up from the bottom of the element?
(Of course the bg image would only be visible with in the div bounds)
This is what i have so far, but don't know how to bump the image up 100px from the bottom.
background: url("/path/to/bg.jpg") no-repeat fixed center bottom #FFF;
(no javascript answers please)
Very simple:
background-color: #fff;
background-image: url("/path/to/bg.jpg");
background-repeat: no-repeat;
background-position: center bottom 100px; /* answer */
Ref: http://www.w3.org/TR/css3-background/#the-background-position
More to read: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
See Example 2 from this page
The right and left round corner images are used in this example is up to 83px height.I have tried to use 25px height right and left round corner images (tab menu height is 25px) and however the menu will be messed up.
My question is
Why images have to be much bigger than the actual tab height?
How to determine the image size?
if you use image as a background of that element then you need this
.some_class
{
height:100px; width:100px;
background: url('close.png');
background-repeat:no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
this will keep the image in your element's height and width
if you are using the image inside the element in HTML code, like
<div class="example"><img tag="images/someimage.jpg"></div>
then in css you need:
.example
{
height: 100px
width: 100px
}
.example img
{
width:100%
height:100%
here you can set up rounded borders for it too
}
I'm trying to add a gradient to the body background which starts from white and ends in grey at the bottom of the page. Since the page has a sticky footer, when the content is bigger than the browser window, the body doesn't stretch/expand with the content. So the gradient stops in the middle. Can someone please help?
HTML :
<html>
<body>
<div class="content"> </div>
<div class="footer"> </div>
</body>
</html>
CSS :
html {
height:100%;
}
body {
height:100%;
background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
min-height: 100%;
}
.footer {
height: 55px;
}
background-attachment:fixed;
Add this to your body CSS.
On a side note you may know this already but: background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%); won't work on IE. This property is only for Mozilla Based browsers.
Cross Browser CSS Gradient ...
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
You just need to set htmland body CSS to auto and remove size from body background gradient - see: http://jsfiddle.net/ZqkY7/
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).