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;
Related
Currently I have an image/img tag that is 1920 x 1080 posted on my Site (the first image displayed of the city).
I now want to style a <p> a <button> and a click-able phone number on the the image so I figured that I have to turn it into a <div> and use the image as a background.
When I tried background:url(image/Houston_remodeling.jpg) center no-repeat; on the div in order to achieve the way that the image is displayed/scaled as you adjust the browser size (on current website, gulfstate.us), the image is displayed zoomed in to the top corner and doesn't look pretty.
If any one can please help I would be very grateful. I am new to this so let me know what else I need to supply and I'll comment right back.
Thank you so much for your help!
Try background-size: cover;
From spec.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
done some modifications
Following will work fine,
Replace the your img tag with this.but its a hack , better to use css background-size
<div style="position:realtive;left:0;top:0">
<div style="position: relative;top:0;z-index: 1;">
<img class="headimg" src="image/Houston_remodeling.jpg">
</div>
<div style="position:absolute;top: 100px;left: 50%;z-index: 2;">
9999999999999999999999999
</div>
</div>
As we are kinda guessing here I will just have a couple random guesses.
This way is using background-size: cover;, as I was writing this I see someone has already suggested it but as I have a example I may as well continue.
HTML:
<div id="header">
<p>This is test text</p>
<p><a>Phone Number: 0000-00000</a></p>
<button>Test button</button>
</div>
CSS:
html,body {
width: 100%;
}
#header {
width: 100%;
max-height: 600px;
min-height: 400px;
position: relative;
z-index: 9998;
background: url(http://www.3dwallz.com/wp-content/uploads/2013/08/21/ice-city-lake-wallpapers-x.jpg) center no-repeat;
background-size: cover;
}
Take a look and see if that's how you want it to react to resizing, give feedback if its not and we will have another go.
DEMO HERE
Note: After looking at the website you have linked to, I would suggest using this method for your div background. It is a lot cleaner and looks overall more professional.
quick demo you need to tweak the css as per your design ,
www.jsfiddle.net/jKnbL
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.
Hello on my login page I have a background image. Currently the image is centered but not centered the way I want it. I want it so the image is always centered in the middle of the screen. Curently, my image is centered but is positioned at the top of the page. The image need to be positioned in the middle of the screen, and kept centered.
login.html
<body style="background-image: url({{MEDIA_URL}}/admin_media/img/admin/bigstock_Photo_Showing_Financial_Growth_1339836.jpg); background-position: 50% 50%; background-repeat:no-repeat;">
may be you have write like this :
background-position: center center;
EDIT:
may be there problem with the body because it not takes screen entire height so if you want an image show in the center of the screen then write
html,body{height:100%;}
body{
background:url(http://www.poster.net/van-gogh-vincent/van-gogh-vincent-sternennacht-2601013.jpg) no-repeat fixed center center;
}
check the example http://jsfiddle.net/sandeep/m2fZs/2/
Instead of continuing to post comments, I thought it might be smarter to create a new answer.
Would something like this demo work for you? (replace 'fixed' with 'scroll' , if you want the img to scroll up and down with the page)
try it like this:
#element {
background-attachment:fixed;
background-position:center;
}
this should work!
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/
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