You can view the page in question here: http://www.envisionlocal.com/
Underneath the blue, you'll see where there's a blank white space before the grey area starts. I believe it's this code:
<div class="bottom_part"></div>
Which uses this CSS:
#banner .bottom_part {
clear: both;
padding: 167px 0 0;
}
But when I remove that from the HTML, I still get the same white space on the page. Does anyone know what I need to change to remove it?
You should inspect your page.
body {
background: url("../images/body_bg3.jpg") repeat-x scroll left 0 #F3F4F4;
}
This is the image: http://www.envisionlocal.com/images/body_bg3.jpg
Your background is one whole image, that gives the impression that there is white space when you remove your div.
Change your background-image:'body_bg3.jpg' in body element
Drip was right, need to fix background image on body.
To fix the issue replace file images/body_bg3.jpg with this
http://i.stack.imgur.com/sTwFE.jpg
and remove dev with class "bottom_part" from html
It's part of the background image here: http://www.envisionlocal.com/images/body_bg3.jpg
When you zoom in you can see a 1px wide image that is repeated horizontally with this style:
background: #F3F4F4 url(../images/body_bg3.jpg) repeat-x left 0px;
You can crop the blue part out of the image or mimic the image with a div structure and styling.
Related
There is a white border surrounding the banner of the website and it's really annoying me. It is like some sort of border about a width of 10px and white. This takes place at the top of the website.
I would have uploaded a picture, but it won't let me.
Anyways, this is all of the code for the banner:
.image{
padding:0;
margin:0 auto;
width:100%;
}
Is there any possible way I can remove this white border?
Edit:
I solved it by changing the image into a div and making the image the background of the div and positioned it to left by 0 and top by 0.
try adding border: 0 !important;
First thing first check image outer element if have any sort of padding margin or border, if yes then remove it otherwise jus give image width of 100vw instead of 100% .
The code below is a link which has a class through which I want to add a background image. I am not able to display background image however same code sets background color correctly so what I am missing here? I don't want to use <img> tag inside link because I want to change background image on hover.
.dropbtn{background: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg) 50px 50px no-repeat;}
<a class="dropbtn">image</a>
See Clearly i used class and in css,me use background-image.It is not necessary to do 1 thing from only one method.there are many options to do any anything
You can try this way.Wrap the <a> with a div then style below this way.Hope this will help you.
.hello {
width: 100%;
background-image: url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg);
height: 700px
}
<div class="hello"><a class="dropbtn">image</a>
</div>
You are showing 50px 50px
Is your link 50px heigh?
My guess is that you should start with 0 0 and see where the image is. Is there a lot of transparent or white space on the canvas so the actual image is not in view especially with the 50px right and top positions added also?
Add height to your link and remove the image positioning by using left top.
you are using wrong class for css
use below code
.dropbtn{background-image:url(http://images.freeimages.com/images/previews/356/cubes-1425949.jpg) 50px 50px no-repeat;
An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.