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>
Related
So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.
I'm using bootstrap if that helps
<div class="jumbotron">
<div> I have images and paragraphs inside of me </div>
<div> I have images and paragraphs inside of me </div>
<div class="clearfix"></div>
</div>
I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:
.jumbotron {
position: relative;
height: 100%;
width: 100%;
}
.jumbotron img {
position: absolute;
}
.jumbotron .covering{
position: absolute;
height: 100%;
width: 100%;
background-image: url('http://lorempixel.com/400/200/');
background-size: cover;
}
You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.
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;
}
I am trying to achieve three different state ACTIVE, PRESSED, INACTIVE
Image files (they are actually same height:
What I am looking to do is have three different texts:
CLINICIAN, NON CLINICIAN, & BOTH
By default all three texts will have the top 1/3 of the image, on hover the middle 1/3 of the image and on press the bottom 1/3 of the image.
I also want the CSS to resize the image based on the text with about 10px padding on each side.
I started off with something like this:
<html>
<head>
<style>
.hb {
background-image: url('l.png');
width: 120px;
height: 50px;
display: block;
text-indent: -9999px;
}
.hb:hover {
background-position: 0 50px;
}
.hb:active{
background-position: 0 -260px;
}
</style>
</head>
<body>
<span class="hb">CLINICIAN</span>
</body>
</html>
But I am sure i am not doing it correctly.
span is an inline element you are making it block in css
you should apply the class to the link rather than span
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>.
I've got the following situation:
<html>
<head>
<title>
Title
</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#thingy {
position: absolute;
top: 20px;
background-image: url("bg.png");
width: 100%;
height: 4px;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="test.png" alt=""/>
<div id="thingy"> </div>
</div>
</body>
</html>
test.png is the same image, bg.png is a 1x4 background image.
The problem is: The element #thingy is displayed in front of the image, so a line goes right through the image. This should not happen, #thingy should be displayed behind the image. Playing with z-index doesn't do anything...
Any hints?
Thanks,
Jost
EDIT: Some more details:
The goal is to get a header banner (test.png above), which has a horizontal line under it. The line must span the entire width of the header area (thus width: 100%), the banner must remain centered.
Declaring position: relative on the image and giving it a z-index corrects the behavior. See below:
#thingy {
position: absolute;
top: 50px;
background-image: url("bg.png");
width: 100%;
height: 4px;
z-index: 1;
}
#wrapper img {
position: relative;
z-index: 2500;
}
Apply a z-index and set the position to the image:
#wrapper img {
z-index: 100;
position: relative;
}
#thingy {
z-index: 99;
}
for sure "thingy" is displayed in front of the image, because it has the position absolute.
z-index can not help in this case, because the image is positioned static and z-index has no influence to it.
I have no idea what you try to achieve, but when you position the image also absolute, then the z-index will work.
EDIT: To the edits to your question it is now a bit clearer what you want. Why don't you put the background-image you have in the moment in thingy ans background-image of your wrapper? If needed positioned to with background-position. Then you center your image in the Wrapper and you are done. You need the "thingy" div for nothing in your case.
i think you are looking for this;
http://jsfiddle.net/mtariq/xmYpq/