I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.
Related
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'm trying to create a page similar to this one http://www.seattlewebdesign.com/.
As you scroll down, the image stays fixed, however when I try to set the background as 'background-attachment: fixed' within a div tag, the background image stays fixed to the browser window and continues to remain fixed after scrolling past the div.
Any ideas on how to achieve what I'm trying to do? Any help would be very appreciated.
Encapsulate it in a div
Fiddle
html {
height: 2000px;
}
#test {
background-image: url("http://www.cssnewbie.com/wp-content/uploads/2008/12/random-art.gif");
width: 100%;
height: 200px;
border: 2px solid red;
background-attachment: fixed;
}
<div id="test"></div>
I was wondering if there is anyway to make the background image in a div expand to the border.
Let's say I have a div with a background and a border. I want to make the background image in the div expand over the border so it kind of looks like there is no border at all(I know there's no point for this but I need to know how to do it for something I'm working on).
Maybe something like this code:
#myImage {
height: 200px;
width: 500px;
background-image: url("image.jpg")
background-repeat: no-repeat;
border: 0px solid black;
overflow: hidden;
}
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>.
http://69.143.137.155/csa-consulting/index.php
I am trying to extend the grey menu bar and the blue background to fill the window (whatever the size) yet keep the content centered at a fixed size. Been working on getting this for a while and cannot seem to figure it out.
Thanks!
Use a background image on the <body>.
.body {
background:#F2F4EE url(menu-bar.jpg) TOP CENTER REPEAT-X;
}
Try adding the width style to your nav class. Like so
.nav
{
width: 100%;
}
Remove the following declarations from #container:
margin-left: auto;
margin-right: auto;
width: 1024px;
Add the following declaration to body:
margin: 0;