Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/
I have a background-image that I want on the top of my page, this image is width 800px and height 400px.
Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.
I have tried the following
<div id="bg-static">
<div id="bg-repeat-y">
<div>
Text goes here
</div>
</div>
</div>
The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)
What should I do to do this?
You are making this seem too complicated, but it's extremely easy.
This is what you need to do:
Your "infinite, repeated" image will go as a site background, like this:
body{ background: url("your-repeated-image.png"); }
Next, create a html like this:
<body>
<div id="container">
any content, text, whatever goes here
</div>
</body>
And just put your 800x400px image there like this:
#container{ width: 800px; background: url("your-top-image.png") no-repeat; }
While testing it, temporarily use this:
#container{ height: 600px; } /* erase after the content is ready */
I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.
Some code on jsfiddle: http://jsfiddle.net/EBK4C/
Related
Why is there white space to the right of my image?
HTML file:
...
<body>
<div class="image">
<img src="image.jpg" alt="Picture here" id="image" align="middle"></img>
</div>
</body>
Here's what it looks like:
The image should just be the giraffe. Where is this white space coming from?
Not sure if you want the image full width or if the white bg color bothers you...
Make sure your image div has a blue background
.image {
background-color: #4099FF;
}
or the parent that wraps your content and image. in this case your body
body {
background-color: #4099FF;
}
Its because your not filling the whole page your image is to small and you div is not full width
div{
width: 100%; // full width
}
img{
height: auto;
width: 100%
}
this will stretch to fill the whitespace
Depends on what you are trying to do, if you want the image to stretch the full width, you could set width:100%, but this would likely result in a very badely pixelated image and I dont recommend this
You may be better placing the image in a full width div, setting that div,s background color to blue and centering the image, or positioning it where you want it to be
Just ran into a problem with repeating background image.
In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space.
Please refer to the screenshot.
Orange bar is my footer. The bottom grey area is the extra space.
Can I make stop the background image repeating for the bottom area?
I mean ideally the background image just repeats as long as my content.
Any help will be appreciated.
.
You can use the below property.
background-repeat:no-repeat;
For more information go through this site
You can also give repeat-y or repeat-x to make the background-image repeat vertically or horizontally respectively.
If you want to give dimensions to your background image then you can use
background-size:100px 100px; /* width height */
I think this is what you mean.
Rather than sticking the background onto the body, slap another div in there and put the background onto that. The inner content will push the div to the right height and will stop at that point (unless otherwise stated).
eg:
<!doctype html>
<html>
<body>
<div id="background">
Your inner content
</div>
</body>
</html>
and put your repeating background onto #background in your css rather than your body.
you can set your background directly in CSS making like so:
body {
background: url(../images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Hope this helps :D
It would be good if you could post your code here.
Try something like this:
<div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both"></div>
</div>
<div class="footer"></div>
</div>
Try this in the style section.
background-size: cover;
background-repeat:no-repeat;
I went to my friend's house to see how my webpage displays on other resolutions, but found that the background image didn't reach the sides. So, I went home and did some research and was told that instead of having my background image in the body tag, I should create a div inside of the body tag before the container div and it would work.
This did work for one of my designs but not in the other - the code was exactly the same, but the images weren't.
I tried adding position:absolute in my CSS and it does show, but it has a strange white border along the top and left hand side.
How can I resolve this issue?
HTML:
<html>
<head></head>
<body>
<div class="background">
</div>
<div class="container">
</div>
</body>
</html>
CSS:
body{
text-align:center;
}
.background{
background:url('images/background.png')no-repeat;
width:100%;
height:100%;
background-position:center;
}
Not quite enough information to really give you a good answer... but the white line on the top and left of the page sound like the natural margin appended to the body tag. If you add this to your css it should remove that:
body {
margin: 0px;
}
Also, the background image "reaching the sides" will be primarily dependent on the image's dimensions relative to the viewing screen resolution and browser size. These factors are out of your control so be cautious where you're using an image in the background of your designs.
I am looking for a css way to hav this layout sport a 100% height div, meaning that the white will trail down to the bottom of the document not the window. I would like to do this without images and without javascript.
I've tried html,body{height:100%} which only applied to the window not the doc.
I've also tried to put a 900px body background image and it was not centered with the container div.
Looking at the live site because the URL is conveniently visible inside your image..
Add this CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
You'd need something like
<html>
<body style="height: 100%; overflow: hidden">
<div id="realbody" style="height: 100%: overflow: auto">
... page goes here ...
</div>
</body>
</html>
This way you disable scroll bars on the actual page body, and all the scrolling tags place "inside" the document on the "realbody" div. With suitable styling on #realbody, you can make the backgrounds stretch as you need them.
You can actually force the containing div to continue behind your other divs by using special separator divs with a clear: both; set in them. Like this:
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer
</div>
<div style="clear:both;"></div>
</div>
Use the where ever you want your wrapper to continue going down.
NOTE: I'm not sure whether W3c says that's good or bad practice, probably bad, BUT it works.
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
the question is a bit old, but, if you don't want to change body and html, and need an element with 100% height without scrollbar you can use this on the div:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
I'm extremely confused why my code won't display the image properly. Here's my code:
<style type = "text/css">
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
</style>
<div id = "pic"> <p>
</p> </div>
Only a tiny portion of the image is displayed along with the text... I'm so confused why this is happening. The only way I can display the whole image is if I add almost 170px of padding around the image. Someone please help!
Thanks.
You need a closing brace before </style>
#pic has a width and height of zero, so the background wont show. Either put content in the div, or set a width and height.
Check it out working, here: http://jsfiddle.net/UzcDM/1/
You need to specify a width and height for your div.
Also, make sure you close your CSS:
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
width: 200px;
height: 300px;
}
Put Height and width in your css class.
Please view demo here
taking that path set right e.g. ../../Images/logo/google.png,
try adding position:absolute;
it might be simply behind some elements