The following code ususally works well for me when I am using .gif or jpg images..
#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px; }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }
<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3"> Content Text Goes Here. </div> </div> </div>
But as you can see I use .png because everything needs transparency to see through to the background. So the "middle.png" background shows up behind the header and footer. I need all the room I can in this div at the top and bottom but can't seem how to figure out the best css code to make this work.
Example
You could try this:
Combine the top + middle images into one image and make the middle section really long.
Place that as the background image of a div.
Inside the above div place a second div with the bottom image aligned to the bottom of this div as a background image. Make the bottom image not transparent but have it filled around the cloud by the yellow bg colour.
try this, re-order your div's as follows
<body>
<div id="contentBox2"></div>
<div id="contentBox1">
<div id="content">Content Goes Here</div>
</div>
<div id="contentBox3"></div>
</body>
Then change the CSS as follows, this is a more logical layout and should be easier to follow, the internal #content div will add padding to the text so it appears inside the image. The min-height of the top and bottom divs are set to the height of the images so you don't have any background color seeping through. You can change the min-height of #ContentBox1 to your desired size.
#contentBox2 {
background: url("images/bg-top.png") no-repeat scroll center top transparent;
margin: 0 auto;
min-height: 304px;
position: relative;
width: 980px;
}
#contentBox1 {
background: url("images/bg-middle.png") repeat-y scroll 0 0 transparent;
margin: 0 auto;
min-height: 560px;
position: relative;
width: 980px;
}
#contentBox3 {
background: url("images/bg-bottom.png") no-repeat scroll center bottom transparent;
margin: 0 auto;
min-height: 240px;
position: relative;
width: 980px;
}
#content {
padding: 40px;
}
Hope this helps
I used a little bit of Billys suggestiong but changed it up a bit. The restrictions are it has a max-height.
#contentBox1{ position:relative; width:980px; background:url(images/bg-top.png) repeat-y top left; min-height:300px; margin:0 auto; }
#contentBox3{ position:absolute; bottom:-218px; width:980px; height:218px; background:url(images/bg-bottom.png) no-repeat left bottom; } /* bg image is 240px; */
#content{ width:900px; position:relative; margin:0 auto; padding-top:85px;}
<div id="contentBox1"> <div id="content">Content text goes here. </div> <div id="contentBox3"> </div> </div>
You can see http://webdesignmb.com/test/
Related
I'm trying to get image from odoo database to show the image into div background, but my image has white space around it, so i need to remove this white space to apply div background image,
Mycode :
<div t-attf-style="text-align:center;background:url('/web/image/event.event.ticket/#{doc.event_ticket_id.id}/image_medium') no-repeat;
font-size:#{doc.event_ticket_id.font_size}px;width:50%;height:900px;float:left;background-size:500px 900px;display:table;">
<span style="vertical-align:middle;text-align:center;display:table-cell;" t-esc="doc.name"></span>
</div>
How to remove white space around images using CSS ?
Maybe try one of these code's:
img{vertical-align:bottom}
or
img { vertical-align: top; }
or
html, body {
margin: 0;
padding: 0;
}
Hope it helped.
You can try something like this
.main{
text-align:center;
background:url('https://i.stack.imgur.com/hQPzy.png') no-repeat;
font-size:12px;
width:50%;
height:900px;
float:left;
background-size:500px 900px;
display:table;
background-position:-50px -35px;
}
<div class="main">
<span style="vertical-align:middle;text-align:center;display:table-cell;"> Content</span>
</div>
But you have to know size of white space of images. Then you can (-) the position.
I have tried something. Please check it this works fine for you. Here I have tried to set background position and background size. Rest everything can vary like div's width and height.
.back{
background: url('https://i.stack.imgur.com/hQPzy.png');
height: 200px;
width: 200px;
background-size: 130% 150%;
border: 1px solid black;
background-position: 42% 15%;
}
<div class="back"></div>
I have a hard time to get background on both side of my page:
Style
.left {
background: url(wax.png);
width: 15%;
position: absolute;
left: 0px;
height: 100%;
}
.right {
background: url(wax.png);
width: 15%;
position: absolute;
right: 0px;
height: 100%;
}
.middle{
margin: 0 auto;
}
HTML
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
Result
Its close to what I am trying to achieve but the right image is misplaced.
Also the backgrund is not repeated vertically
background: url(wax.png) repeat-y 0 0;
To get the vert repeat.
Do you have something positioned relative? That input text field is probably pushing down the right div unless you have something else positioned relative?
If you're going to use position:absolute, wrap it all and use position:relative on that wrapping div.
Otherwise, you could use the body tag or even the html tag but it's probably better to use a wrapping container.
im not really sure what you are trying to do it looks align to me but for repeating image is this background: url(wax.png); background-repeat: no-repeat
Its close to what I am trying to achieve but the right image is
misplaced.
Add top:0 to the .right class
Also the backgrund is not repeated vertically
As others have mentioned add repeat-y in the background property value
background: url(wax.png) repeat-y
Maybe you just want to place your middle inside one div with the background repeated in both direction and middle having background white
html:
<div id="background">
<div id="content">
this was middle
</div>
</div>
css:
#content{
margin: 15%;
background: white;
}
#background {
background: url(wax.png);
}
here is the layout im trying to achieve.
http://i.imgur.com/kA0yw.jpg
I have a repeating swatch of the background that is set to the html's background so the grey paper tecture repeats beyond the design.
Then i Have the bamboo illustration that goes on top of that set to the background of the body.
I cant seem to get the bamboo to not be cut off to where the content ends.
What is the best possible way to do this?
the white content div in the center needs to extend down to at least the bottom of the page, and i cant for the life of me figure this out it seems like it has to be the simplest thing to do
this is what it looks like now- http://i.imgur.com/55dPe.png
here is the code
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>
and the css
html{
background:url(images/background_swatch.png) top center;
}
body{
margin:0 auto;
background:url(images/background.png) top center no-repeat;
}
div#wrapper{
margin:0 auto;
width:800px;
background-color:#FFF;
border-left:5px solid black;
border-right:5px solid black;
}
#header{
margin:0 auto;
position:relative;
top:25px;
background:url(images/navigation_banner.png) no-repeat;
width:850px;
height:150px;
left: -25px;
}
I'm confused as to what you want to change...Could you post your code?
or which do you want to extend, because it seems to me like the bamboo picture is all the way down, if you want it further, maybe stretch it further (height:120%;) ??
You need to set height 100% on html container, min-height on body container.
http://jsfiddle.net/5FwGZ/
html {
height: 100%;
background-image: url('http://imjustcreative.com/wp-content/uploads/ImJustCreative-2010-08-23-at-06.06.01.jpg');
}
body {
min-height: 100%;
width: 100%;
background-image: url('http://www.landscapecreationsfl.com/flower-dahlia-pink-transparent-background-350_1_.gif')
}
div#content {
height: 400px;
width: 600px;
margin: 0 auto;
text-align: center;
background: white;
}
On the top of my page I have a background image as below ( http://jsfiddle.net/VnXxj/3/ )
<div id="header">
Register/Login
</div>
#header {
background: url("image.png") repeat-x scroll center bottom;
height: 37px;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
Instead of increasing the image's height in Photoshop, is there any way to add a 20px height div above the image?
I tried background: url("image.png") repeat-x scroll center bottom #888888; but the image it has a transparent ending and it mess it.
Thank you for this
try: #header { margin-top:20px; }
I believe this is what you want: http://jsfiddle.net/VnXxj/4/
EDIT: You might find this more useful as well. It's a bit more dynamic. http://jsfiddle.net/VnXxj/6/
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>