http://we-live.in/the_sierra - Towards the bottom of the page I have a div which contains an image of grass. How can I get the grass image to be centered horizontally on the page?
ok i got it centered
now i need to move it lower down on the page
thanks
In your CSS, add the following
background-position:center top;
to the following:
#title{
width:940;
height:145px;
display:block;
background-image:url(images/header.jpg)
}
Additionally, you can also add the following
margin:auto;
But that may not be necessary if you are simply wanting the background image (the grass image) to be centered.
Related
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
I know how to align my background image as well as my #wrapper div tag, but I am unable to get them to line up the way I want. Here is the example:
http://www.marathoneindhoven.nl/
The blue runner stays locked to the main div tag when resizing the window. If I add a large #container around the whole #wrapper, when I resize the browser I have a big space on the left side of the screen because the overall width of the #container is still trying to center itself. I have tried using the css property overflow but can not seem to get that to work either.
How can I possibly get this to work??
If you want the blue runner to move with the page then change your css to this:
#wrapper {
background: url(/images/bg-runner.png) right 0 top 150px no-repeat;
}
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
Just finishing up my college project and I want to place a background image as the div background. The div is on the right hand side, the 'main content' area.
Where can I find a notebook type background image to simulate that the forms are in a textbook? Also, how can I account for variable height of the forms? Just stretch the image?
Any tutorials?
u can try css background-repeat property and make sure to create an image which can be repeated...
Actually you need two image, one image will repeat and make the background, the second image will stay on the right side or left or top or bottom whereever you like it...........to make it work you will need two divs, one outer and one inner..... here is the css for that to work
.blueout{width:650px;
margin-left:0;
margin-top:10px;
background:#fff url(images/repeated-background.gif) repeat-y left top;
padding-left:20px;
}
.bluein{
background:#fff url(images/corner1.jpg) right top no-repeat;
padding:1em 1em 1em 0;
}
and here is the html for it....
<div class="blueout">
<div class="bluein">
<p>some text here</p>
</div>
</div>
repeat-y means it will repeat towards y-axis (vertically) you can change it to horizontal it depends on your slice for background.....
Hope this helps....
I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them using this css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).
EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?
your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you could also set the background-position attribute to set the background relative to the containing div:
background-position: 0px 0px;
i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)