I've a web page that is built the body tag in the CSS is currently set to:
body {
background: url(../images/bg_fence.png) bottom repeat-x;
}
URL: http://s361608839.websitehome.co.uk/careForAll/www/index.html
Right now, it shows a picture of a fence at the bottom of the page.
Instead of using a background in body to do this, how else can I do this?
Create a div:
<div class="fence"></div>
Then add the CSS:
<style>
div.fence {
background: url(../images/bg_fence.png) repeat-x;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 17px;
}
</style>
You can use a div which spans the width of the entire page and comes last in your document flow. It would either have to be a div with overflow: hidden and a large image, or with a background image on the div instead of the body.
Try changing the position:absolute to position:fixed for <div class="fence"></div>.
Related
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
How can I add scrollbars to this image background?
<!DOCTYPE html>
<html>
<head>
<title>VBS</title>
<style>
body {
background-image: url(https://imgur.com/CahbpxJ.jpg);
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The reason I put the image in the background is that I need to put buttons and other elements on top of it. Is there another way to achieve that?
The answer to your original question is:
Why one would ever wants to have a scrollbar for the background? Background is just a background. If it is an important content, then it shouldn't be in the background. Bring it to the front and make it a standard img element or a background for a standard element.
If we convert your comment:
If you add it as an <img> then you cant put buttons etc on top of that image. If you add it as a background, then you can add elements on top of the image
to a question:
How to put buttons and other elements on top of an image?
then the answer would be: There are many ways to do it. One way can be by putting the image inside a div box that is position: relative and then add the button (or any element you want) to the box and make it position: absolute. And then you can add scrolls to the div box. Here is a demo:
.container {
position: relative;
width: 200px;
height: 200px;
overflow: scroll;
}
.container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="container">
<img src="https://imgur.com/CahbpxJ.jpg" />
<button type="button">Click Me</button>
</div>
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I have very simple html page with looong (~8000px width) horizontal panorama image.
The image is set in css as a background background-image:url('long_jpg.jpg');.
I need just to have a scrollbar at the bottom of the page to be able just to scroll the whole background image.
How can do that with css? Can you please give any working example?
check this working example http://jsfiddle.net/a9QvT/1/
.panorama
{
width: 1280px;
height: 1024px;
background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
One way is to set the body width to the same width as the image
body {
width:8000px;
}
If you have any other content, you want to encapsulate all that in a div, so that the content doesn't shatter across 8000px as well.
Is there any reason you can't do this?
HTML:
<body>
<img src="picture.jpg" class="bgpic" />
</body>
CSS:
body
{
margin: 0;
padding: 0;
width: 8000px;
height: 100%;
}
.bgpic
{
width: 100%;
height: 100%;
}
Just like this...
body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}
but a quick warning, in terms of design and layout, people are used to pages which scroll up and down, asking them to scroll side to side will seem pretty annoting to most people. Unless you use some anchor tags and they can just click their way to specific points on the page without having the drag the scroll bar.
If I try to set a background image for <html> to be centered and top and for <body> to be centered and bottom it doesn't work and only <html> background is shown.
Is this in every browser or not?
You can use CSS3 to achieve this using multiple backgrounds. Something like:
body {
background-image: url(bg1.png), url(bg2.png);
background-position: center top, center bottom;
}
If not, make sure your body and html are 100% height, or at least have a min-height of 100%.
Use different image for both and add height:100%
html{
background:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNxe5UjGfVsd1EpdEtrrlGDhjEO2VMFoIY9SGRCuBd4qAr9XhcCQ) top center no-repeat;
height:100%
}
body{
background:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqQ6g5bisPWccunUGGItC09wa1kgcc5X-rEEGGdEoWEwqUCnuZ) bottom center no-repeat;
height:100%
}
DEMO
The <html> tag is the document root and wasn't really intended to be visible or have CSS properties applied to. CSS spec 2.1 does define the <html> to have a box-model, but I still wouldn't rely on it.
You can either set multiple backgrounds with CSS3, or create an additional (absolute or fixed) <div> like so:
HTML
<body>
<div id="container">
<!-- your usual content -->
</div>
<div id="bg"></div>
</body>
CSS
body { background-image: url(...); }
#bg {
background-image: url(...);
float: left; /* body overflow fix */
left: 0;
position: absolute;
top: 0;
height: 100px; /* height of your background */
width: 100%;
z-index: -1000;
}